Actual IE6 bugs
Recently, I began to notice that today it has become fashionable not to support IE6 or just forget about its existence. It is outdated for a long time, it is buggy, it becomes less and less, etc. But still, while IE6 is still alive, you need to remember about simple little things that can make displaying a site in it completely correct. So, some IE6 bugs and how to overcome them:
1. IE6 and the background color of the blocks
Bug description: when drawing blocks with multiple background images, ie6 uses sub divs.
Padding is added to the last div: 20px, everything is logical, but in IE6 the background color creeps out 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;}
Здесь у нас текст
Bug fix: remove the 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;}
Здесь у нас текст
Another bug fix: add width: 100% for .normalBlock
2. IE6 and block height
Description of the bug: when rendering blocks with a fixed height in ie6, the block is bursting in height.
.normalLine {background:#666; height:5px;}
Bug fix: add overflow: hidden to the problem block
.ieFixedLine {background:#666; height:5px; overflow:hidden;}
3. IE6 and pictures
Bug Description: Pictures are bursting with blocks
.normalPics {background:#000; width:125px; height:100px;}
Bug fix: add overflow: hidden to the problem block, or add display: block to the attached picture, you can also add vertical-align: top to the attached picture
.ieFixedPics {background:#000; width:125px; height:100px;}
.ieFixedPics img {display:block;}
4. IE6 and floating blocks
Description of the bug: an incomprehensible indent that appears after 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;}
Здесь текст
Description of the bug: an incomprehensible indent that appears after floating blocks
.ieFixedMenu {height:22px;}
Здесь текст
All this in its entirety can also be viewed here.