IE6の実際のバグ

最近、私は今日、IE6をサポートしないか、その存在を忘れないことが流行になっていることに気付き始めました。 それは長い間時代遅れであり、バグがあり、ますます少なくなります。 しかし、それでも、IE6はまだ生きていますが、その中のサイトを完全に正しく表示できる簡単な小さなことを覚えておく必要があります。 そのため、いくつかのIE6バグとそれらを克服する方法：

1. IE6とブロックの背景色

バグの説明：複数の背景画像でブロックを描画する場合、ie6はネストされたdivを使用します。
最後のdivにパディングが追加されます：20px、すべてが論理的ですが、IE6では背景色がブロックの端からはみ出します

.normalBlock {background:#CCC url(img/q.gif) no-repeat 0 0; color:#000; margin:0 0 15px;}
.normalBlock div {background:url(img/q.gif) no-repeat 100% 0;}
.normalBlock div div {background:url(img/q.gif) no-repeat 0 100%;}
.normalBlock div div div {background:url(img/q.gif) no-repeat 100% 100%; padding:20px;}

< div class ="normalBlock" >
< div >
< div >
< div >

</ div >
</ div >
</ div >
</ div >

バグ修正： CSSから下のインデントを削除：パディング：20px 20px 0、高さ：20pxの別のネストされたdivを追加

.ieFixedBlock {background:#CCC url(img/q.gif) no-repeat 0 0; color:#000; margin:0 0 15px;}
.ieFixedBlock div {background:url(img/q.gif) no-repeat 100% 0;}
.ieFixedBlock div div {background:url(img/q.gif) no-repeat 0 100%;}
.ieFixedBlock div div div {background:url(img/q.gif) no-repeat 100% 100%; padding:20px 20px 0;}
.ieFixedBlock div div div div {background:none; padding:0; height:20px;}

< div class ="ieFixedBlock" >
< div >
< div >
< div >

< div ></ div >
</ div >
</ div >
</ div >
</ div >

別のバグ修正： .normalBlockの幅：100％を追加

2. IE6とブロックの高さ

バグの説明： ie6で固定高さのブロックをレンダリングすると、ブロックの高さが破裂します。

.normalLine {background:#666; height:5px;}

< div class ="normalLine" ></ div >

バグ修正：オーバーフローを追加：問題ブロックに非表示

.ieFixedLine {background:#666; height:5px; overflow:hidden;}

< div class ="ieFixedLine" ></ div >

3. IE6と写真

バグの説明：写真がブロックであふれています

.normalPics {background:#000; width:125px; height:100px;}

< div class ="normalPics" >
< img src ="img/test-pic.jpg" alt ="" />
</ div >

バグ修正：オーバーフローを追加：問題ブロックに非表示、またはディスプレイを追加：ブロックを添付画像に追加、垂直方向に追加：トップを添付画像に追加

.ieFixedPics {background:#000; width:125px; height:100px;}
.ieFixedPics img {display:block;}

< div class ="ieFixedPics" >
< img src ="img/test-pic.jpg" alt ="" />
</ div >

4. IE6およびフローティングブロック

バグの説明：浮動ブロックの後に表示される不可解なインデント

.normalMenu {padding-left:6px;}
.normalMenu a {display:block; float:left; margin:0 2px 0 0; text-decoration:none; padding:2px 0 0; font-size:11px; font-weight:bold; line-height:13px; font-family:Tahoma, Geneva, sans-serif;}
.normalMenu a span {display:block; padding:3px 5px 3px; background:#FFF; border:1px solid #CCC; border-bottom:0;}
.normalMenu a:hover {padding:0;}
.normalMenu a:hover span {padding:3px 5px 5px;}
.normalContent {border:1px solid #CCC; background:#FFF; padding:10px; clear:both;}

< div class ="normalMenu" >
< a href ="#" >< span > 1 </ span ></ a >
< a href ="#" >< span > 2 </ span ></ a >
< a href ="#" >< span > 3 </ span ></ a >
</ div >
< div class ="normalContent" >

</ div >

バグの説明：浮動ブロックの後に表示される不可解なインデント

.ieFixedMenu {height:22px;}

< div class ="normalMenu ieFixedMenu" >
< a href ="#" >< span > 1 </ span ></ a >
< a href ="#" >< span > 2 </ span ></ a >
< a href ="#" >< span > 3 </ span ></ a >
</ div >
< div class ="normalContent" >

</ div >

このすべてをここで見ることもできます。