IE6でよく遭遇するCSSのバグとその解決方法
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。
IE6 - CSS Bugs and Fixes Explained
IE6で、マージンが２倍になってしまうバグ
IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。
下記のコードで、IE6はマージンが20pxになります。
sample:バグ
#navigation{
float: left;
width: 200px;
margin-left: 10px;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
}
マージンが２倍になってしまうバグは、「display:inline;」で解決します。
sample:解決方法
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
IE6で、hasLayoutプロパティによって起こるバグ
IE6には、hasLayoutプロパティの仕様によりいくつかのバグが生じます。
※hasLayoutに関しては下記のエントリーを参照ください。
IEでのCSSのバグを回避するhasLayout
下記のコードで、IE6は背景色#CCCを表示しません。
sample:バグ
#container{
background-color: #CCC;
overflow: hidden;
}
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
hasLayoutのバグは、「height:1%;」で解決します。
sample:解決方法
#container{
background-color: #CCC;
overflow: hidden;
}
* html #container{
height: 1%;
}
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
IE6で、小さい高さを指定した場合に起こるバグ
IE6で、1pxや2pxなど小さい高さを指定した際、そのサイズより大きくなってしまうバグがあります。
下記のコードで、IE6は高さ2pxではありません。
sample:バグ
#corner{
width: 10px;
height: 2px;
background-color: #C00;
}
小さい高さを指定した場合に起こるバグは、「font-size:0;」で解決します。
sample:解決方法：その１
#corner{
width: 10px;
height: 2px;
background-color: #C00;
font-size: 0;
}
もしくは、「overflow: hidden;」で解決することもできます。
sample:解決方法：その２
#corner{
width: 10px;
height: 2px;
background-color: #C00;
overflow: hidden;
}
Post on:2008年1月21日
Comments
Dave Woods
on 2008年1月21日
Hi there, glad you found the article useful and thankyou for linking back to the original source of the article :)
通りすがり
on 2009年4月17日
ＩＥでのみ高さの調整がうまくいかず困っていました
ありがとうございます
nn
on 2009年6月24日
感涙ものです。
ずーっと悩んでました。
解決できました。ありがとうございました
コリス
on 2009年6月24日
> nn さん
お役にたてて、よかったです :-)
地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
on 2009年10月9日
「Internet Explorer 6」対策をしてみた
ブログデザインリニューアルに伴い、弱者排除の方針で「Internet Explorer 6」対策をしていなかったのですが、いまだに2割も「Internet Explorer 6」を使っている人がいることを知ってできれば何…
Serendipity » IE6、四苦ハック。
on 2009年11月21日
[...] IE6でよく遭遇するCSSのバグとその解決方法 | コリス [...]
解決IE6的兩倍margin問題 « Bigcatw's Blog
on 2010年2月27日
[...] http://coliss.com/articles/build-websites/operation/css/753.html [...]
Phorsythia » IE6に勝ったぞー！
on 2010年5月26日
[...] 問題となったのはIE6で複数クラスを使う時の注意点（CSS-EBLOGさん）やIE6でよく遭遇するCSSのバグとその解決方法（colissさん）などではなく”文字コード”の問題でした( [...]
ダブルマージン | vs-ie
on 2010年7月20日
[...] IE6でよく遭遇するCSSのバグとその解決方法 | コリス Posted in スタイルシート, 表示崩れ | Tags: display, float, inline You can leave a response, or trackback from your own site. [...]
通りすがり
on 2011年5月19日
ありがとうございます。
一発で解決しました！感謝です！！
これからコーダーになる人が独学でスキルアップする方法 | Aidelab
on 2011年6月7日
[...] IE6でよく遭遇するCSSのバグとその解決方法│コリス [...]
【CSS】IE6のマージンが2倍になる/3段組 | Memorandum
on 2011年7月25日
[...] floatとマージンでIE6のマージン2倍のバグ回避 →display:inline;で解決 http://coliss.com/articles/build-websites/operation/css/753.html [...]