IE6…背景色が指定された要素内にfloatがある場合要素内の文字が消える
解決策
hasLayoutプロパティーをtrueにする。
具体的には以下の要素のどれかをfloat要素の親オブジェクトに明示する。
| プロパティー | 値 |
|---|---|
| display | inline-block |
| height | any value |
| float | left or right |
| position | absolute |
| width | any value |
| writing-mode | tb-rl |
| zoom | any value |
hasLayoutとは
IEの独自プロパティーで、オブジェクトがレイアウトを持っているかどうかを示すもの。
読み出し専用プロパティーで値はブーリアンである。
ほとんどのオブジェクトはデフォルト値をfalseに設定されているが、img要素、input要素などデフォルト値がtrueのものも存在するので注意が必要。
具体的には？
width、heightはインライン要素では無視されるプロパティーであり、またfloat、position、writing-modeなどは表示に直接影響を与えてしまう。これらを考えるとほとんどの場合zoomプロパティーを明示することにより回避を行うのが現実的だろう。
*{zoom:1;}
しかし、zoomはIE独自プロパティーのためW3Cに準拠したCSSでは無くなってしまうという問題がある。また、*{zoom:1;}とした場合、IE7のズーム機能で拡大、縮小した際に表示くずれを起こす可能性があるので、根本的な解決というわけではない点に注意。