Actual IE6 bugs

    IE 6

    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

    Bug in 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;}


      

        

          

            Здесь у нас текст
          

        

      



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

    Correctly in 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;}


      

        

          

            Здесь у нас текст
            

          

        

      



    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.

    Bug in IE6

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



    Bug fix: add overflow: hidden to the problem block

    Correctly in IE6

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



    3. IE6 and pictures


    Bug Description: Pictures are bursting with blocks

    Bug in IE6

    .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

    Correctly in IE6

    .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

    Bug in 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;}



      Здесь текст


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

    Correctly in IE6

    .ieFixedMenu {height:22px;}



      Здесь текст


    All this in its entirety can also be viewed here.

    Also popular now: