© Aomixer.com All rights reserved.
ブラウザ互換の壁 マージンが倍になるバグ
Webサイトをコーディングする際にいつも悩ませられるのがブラウザ互換です。
float:leftをかけたボックスのマージンを10pxとしていたら
InternetExplorer 6では、なぜかマージンの値を
倍の数値(この場合20px)で取ってしまうというバグがあります。
2カラムのスタイルで、右のカラムが下に行ってしまったというのは
このバグのせいであることが多いです。
clear:bothをかけたボックスも同様のバグが発生するようです。
ちなみにこれを何とかするには、
- marginを使用せず、paddingで代用する
- アンダースコアハック(_margin: 5px;)でIEに半分の値を適用させる
- float:leftをかけたボックスにdisplay:inlineを追加する
などがあります。
最後のdisplay:inlineを追加するのが一番お手軽かなと思います。
このブログでもdisplay:inlineで回避しています。
アンダースコアハックは便利なのですが、
W3C CSS Validatorでエラーになるので多用しないほうがいいです。
コメント
この記事へのトラックバックはありません。
VPSでWordPressサイトを作るのに必要なスペックは?
VPSをDTI→お名前.com(KVM)に切り替えました。 というのも、WordPressってCPUへの負荷が高いのなんのって! DTI…
この記事へのコメントはありません。