Current IE6 Bugs

Recently, I began to notice that today it has become fashionable not to support IE6 or simply to forget about its existence. It is outdated long ago, it is buggy, it is becoming less and less, etc. But still, while IE6 is still alive, you need to remember about simple trifles that can make the site display in it quite correct. So, some IE6 bugs and how to overcome them:


')

1. IE6 and block background color

Bug description: when drawing blocks with multiple background images in ie6, nested divs are used.
The last div is added padding: 20px, everything is logical, but in IE6 the background color crawls over the edge of the block

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

Bug fix: remove bottom indent from CSS: padding: 20px 20px 0, add another nested div with height: 20px

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

Another bug fix: add width: 100% for .normalBlock

2. IE6 and block height

Description of the bug: when drawing blocks with a fixed height in ie6, the block is expanded in height.

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

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

Bug fix: add overflow: hidden to problem block

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

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

3. IE6 and Pictures

Description of the bug: pictures burst blocks

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

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

Bug fix: add overflow: hidden to the problem block, or add display: block to the nested picture, you can also add vertical-align: top to the nested picture

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

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

4. IE6 and floating blocks

Description of the bug: incomprehensible indent that appears after the floating blocks

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

Description of the bug: incomprehensible indent that appears after the floating blocks

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

All this can also be viewed here.