IE6 以外では、position: fixed;
がサポートされているのでどうってことはないが、IE6はposition: fixed;
が使えないので、ごにょごにょしてなんとかしないといけない。
Articles tagged 'HTML'
出現条件を説明するのが難しい。IE6はfloat
を指定した要素の親要素にwidth
属性を指定するとfloat
した要素の高さが親要素に含まれるバグがあります(詳しくはIEでfloat属性を指定した要素の親要素のborderが消えるバグを見て下さい)。このバグが発生している場合に、float
属性を指定した子要素が兄要素に指定されているmargin-bottom
を継承するみたい。
どうも、IEだけ異なる挙動をするので、検証してみました。vertical-align 属性のキーワード指定の初期設定が違うだけなのかと思いきや。
以前、画像置換法の問題点について書きましたが、時は過ぎ、すっかり画像置換法のお世話になっています・・ 通常と hover 時の画像を1枚にしておくとプリロードの必要がないので便利です。ですが、最近は再び、その問題点についての議論が諸処で巻き起こっているようです。
対応しなければいけない可能性がでてきたので windows 版IE5.5に関するCSSハックを調査。
しかし、float
って難儀だなあ・・・
a
要素のtarget
属性は使用しないことが推奨されているが、別ウィンドウの必要性が無くなった訳ではないので、Valid な新規ウィンドウの開き方を考えてみた。既出かもしれませんが。
2コラムレイアウトなどでfloat
で左右に振る方法があるが、float
を指定した要素を包含する親要素のボックスは高さ0でレンダリングされてしまう。
たまたま、IE6でmargin
プロパティによるセンタリングが再現できたので、原因を調査。
テンプレートをネストしてる場合の弊害ですが、いろいろ試した結果、回避方法がわかったのでメモ。
width
指定した<table>
内の文字列折り返しで、Safariだと指定したwidth
を越えてしまう現象を発見。
CSSでコーディングしていると、<li>
要素とか<td>
要素に配置した画像の上下が妙にあいてたりするんだけど、これがひとつの要因ぽい。
li
タグはmargin
、padding
だけでは意図したスペースが指定できない場合がある。モダンブラウザではwidth
、height
を指定するとイケテル。それでもIE6では2pxぐらい余分なスペースが空く。。。アンダースコア・ハックで別な値を指定しないとだめっぽい。。。
Safariで文字化けするのは<head>
内で文字コードを宣言してないかららしい。
古いコンテンツを焼きなおすときは気をつけないとね。