htmlのバグについての記事も3回目になります。
今回もいくつか紹介していきたいと思います。
まずはIEでCSSのバグを回避する「hasLayout」です。
IE7でzoomを使用したときににレイアウトが崩れたり、重なってしまったり、
IEでfloatした要素がはみでてしまったりと、IE独自のCSSのバグがいくつかあります。
これは、IEのhasLayoutが原因の一つとなっています。
hasLayoutとはオブジェクトがレイアウトを持っているかどうかを示すものです。
hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。
false
デフォルト値。
オブジェクトがレイアウトを持っていない。
true
オブジェクトがレイアウトを持っている。
先ほどの、レイアウトが崩れたり、重なってしまったり、
IEでfloatした要素がはみでてしまったりというのは、
hasLayoutの値がfalseの場合に起きます。
これらのIEでのCSSでのバグを回避するにはhasLayoutをtrueにする必要があります。
そのためのCSS特定のプロパティはこちらです。
| property | value |
|---|---|
| display | inline-block |
| height | any value |
| float | left or right |
| position | absolute |
| width | any value |
| writing-mode | tb-rl |
| zoom | any value |
IEのCSSでのバグを回避するためには、例えば「height」の値に「1%」を指定し、
「hasLayout」の値を「true」にして回避します。
表の中でよく使用されているものは「height=”1%”」や「widthの値を指定する」などがあります。
hasLayoutを変更するプロパティには、「float」「position」「writing-mode」のように実装するレイアウトで
その値を指定できないなどの制限があるものもあります。
また、「height=”1%”」のように特定の箇所には使用できないものもあります。
そこで「zoom」を使ってみます。
*{zoom:1;}
「*」は全てのタグに適応する意味になります。
これでバグは回避できると思います。
次にクロスブラウザについてです。
フォントの種類は、PCやMacなどOSごとに異なります。
中には共通で使用できるフォントもありますが、スタイルシートで指定すると
レンダリングに問題のあるフォントがあります。
解決策は「Lucida Grande / Sans」は指定しないことです。
Safari(Mac)ではキレイに見えますが、IE(PC)では同じようにはレンダリングされません。
フォントのサイズは、IEではpx指定されたテキストはサイズを変更できません。
全てのブラウザでテキストのサイズ変更を可能にする方法があります。
解決策はまずbody要素に「%」を使用して基準のフォントサイズを指定し、
個別の要素に「em」を使用して調整してスタイルシートを作成します。
こんな感じで今回は終わりたいと思います。
そろそろ書くこともなくなってきたので、次回からはなにか違うことを書こうかと思います。
ishi
