大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。
最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。
floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。
大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。
該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。
対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。
divを追加して対応という方法も勿論あるのですが、バグ対応の為に本来だったら必要の無いdivを増やす事に抵抗を感じ、ハックで対応しました。
---- こっから続き
簡単にまとめ。
IEのフロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置されるバグが発生した際は…
- divなどを追加してfloatを指定していないボックスにmarginを指定する
- 背景画像が指定されていない場合は、paddingで対応
- IE限定バグの為、アンダースコアハックなどのハックで対応
- 見映えがさして変わらない場合、気にしないのが得策
- 各種SBMに追加
-
comment [4]
1 - naoyan さん
こんにちはいつも拝見させていただいてます。
以前CSSnite忘年会で名刺交換させていただきました。
上記の件、僕もいつも悩んでいたのですが、
フロート配置する要素に
display: inline
を適用することで回避できることをここで見つけました。
http://www.positioniseverything.net/explorer/doubled-margin.html
URL｜2007年2月22日 12:59
2 - ひら＠管理人 さん
>naoyanさん
こんなお恥ずかしいBlogを読んで頂いて嬉しい限りです。
naoyanさんってなおたんさんかな？？
違ったらすみません…
display: inlineはボクも何処かで読んだ気がするんですが、試した事無かったです。
（書いた当時は知らなかったんですが）
コメントありがとうです。
またNiteでお会いしたらお気軽にお声を掛けて下さいまし。
2007年2月23日 00:32
3 - ままん さん
はじめまして！大阪在住のままんと言います。
検索エンジンから「CSS 相対配置」ってキーワードで飛んできました！
私は 楽天のブログでこちょこちょとタグを使い始めたのがきっかけで
今 独学でCSS勉強中（かなり駆け出しです…苦笑）の主婦です。
このサイトの内容、ひら＠管理人さんのプロフィールを拝見し
お気に入りになっちゃいました！
CSSに非常に詳しい方々の中に こんなひよっこな私がコメントするのは少し迷いました。
でも、いつかは ひら＠管理人さんやその他の訪問者さんのように
私もCSSについて語れるレベルになるよう頑張りま～す！
（なんとか「ひら＠管理人さん」の記事の内容が
わかるような感じになってる自分にビックリ！
すごくうれしいな♪）
さてさて、CSSの世界に踏み込んだ「ひよっこな私」が
一番ビックリしたのは この「ブラウザのバグ無法地帯」の存在でした！
これからもいろいろ参考にさせていただきますね！
お邪魔しました！！
2007年3月 8日 03:03
4 - ひら＠管理人 さん
> ままんさん
はじめまして。
コメントは大歓迎ですよ。特にこういった類のコメントは純粋に嬉しいです＾＾
内容が気に入っていただけたのは、ブログ冥利につきます♪
有難う御座います。
でも、プロフもって(笑
このサイトの目標としても、覚えたての方々に少しでも「分かりやすく」「楽しんで」覚えてもらえたらなぁ～と日々書いております。
CSSでサイトを組む上で一番厄介なのが、数100種類以上有るブラウザ毎のバグだと思うので、大変だとは思いますが、頑張って下さい！！
ところで、このブログは密かに主婦にウケがいいのか！？(笑
2007年3月 8日 08:21