memo.xight.org

日々のメモ

カテゴリ : CSS

4ページ目 / 全4ページ

アンカーのマウスオーバーで position:relative; なブロックが逃げる WinIE のバグ

Posted on | Tagged : ,

Summary

  アンカーのマウスオーバーで一部のブロック要素が移動してしまう．
  バグ再現ドキュメント
  バグを利用した動画

ポイント

・スイッチとなるアンカーへの border 指定 (本数に限りはない)
・リストの入れ子
・スイッチとなるアンカーより上の階層にある li への padding-top・padding-bottom 指定?
・スイッチとなるアンカーより後に出現するブロックへの position : relative; 指定 (複数可)
IE のデフォルトスタイルシート

HTML

<ul>
	<li>
		<ul>
			<a href="#">スイッチ</a>
		</ul>
	</li>
</ul>
<blockquote>下がって行くブロック<blockquote>
<div>下がって行くブロック</div>
<pre>下がって行くブロック</pre>

CSS

a:hover, a:active{
	border-bottom : 1px solid;
}
li{
	padding-top : 1px;
	padding-bottom : 1px;
}
p, div, blockquote, pre{
	position : relative;
}

Reference

  Black Box - 2004-11-21
  http://orz.cc/blog/2004/11/21

アクセスしやすいWebページ

Posted on | Tagged : ,

マウスクリックに反応するページ上の全テキスト領域に対してAタグのみを使用する

  ・キーボード操作のみでクリックに反応する領域にナビゲート可能．
  ・Screen Readersプログラムにも情報提供可能．
  ・アンカー上にマウスカーソルが移動すると，カーソル形状が"手の形"に変化する．

常に title属性 に値を割り当てる

  ・テキスト情報を持たない要素に追加情報を指定できる．
  ・<area>タグ,<bgsound>タグなどで有効．
<bgsound src="example.mid" title="Example Song" />


CSS Positioningを使う場合は必ず "em" 単位で座標を指定する

  ・ユーザがフォントサイズを変更した場合に，emのサイズもフォントサイズに応じて変更される．
  ・標準のフォントサイズでは，1em = 10ピクセル とほぼ同じ．

Reference

  MSDN Japan - MSDN Library - Dynamic HTMLのアクセシビリティ
  http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/accessibility/accessibility.asp

Internet Explorer の CSS 対応状況，バグ情報

Posted on | Tagged : ,

Reference

  CSS Laboratory
  http://is.vis.ne.jp/start.xhtml
  Internet Explorer 6 における CSS の拡張
  http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp
  Internet Explorer (Windows) CSSバグリスト
  http://cssbug.at.infoseek.co.jp/detail/winie.html
  Internet Explorer 5.5(Win32版)
  http://members.jcom.home.ne.jp/pctips/ua/IE55.html
  Internet Explorer 6.0(Win32版)
  http://members.jcom.home.ne.jp/pctips/ua/IE60.html

<TABLE> の cellpadding や cellspacing に代わるCSSの属性

Posted on | Tagged : ,

cellpadding

  <TD><TH> の padding: 0px;

cellspacing

  <TABLE> の border-collapse
    隣のセルの枠線と重ねて表示
      border-collapse:collapse;
    隣のセルとすこし離して表示
      border-collapse:separate;
  <TABLE> の border-spacing
    border-spacing: 0px;