Clever Geek Handbook

IE6の実際のバグ

IE 6



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







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



バグの説明：複数の背景画像でブロックを描画する場合、ie6はネストされたdivを使用します。

最後のdivにパディングが追加されます：20px、すべてが論理的ですが、IE6では背景色がブロックの端からはみ出します



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を追加



IE6で正しく



.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で固定高さのブロックをレンダリングすると、ブロックの高さが破裂します。



IE6のバグ



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



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







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



IE6で正しく



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



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







3. IE6と写真



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



IE6のバグ



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



< div class ="normalPics" >

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

</ div >







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



IE6で正しく



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

.ieFixedPics img {display:block;}



< div class ="ieFixedPics" >

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

</ div >







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



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



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 >







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



IE6で正しく



.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 >







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


More articles:


All Articles