Common Bugs in Internet Explorer 6 and their fixing methods, and bugs in Internet Explorer 6

Common Bugs in Internet Explorer 6 and their fixing methods, and bugs in Internet Explorer 6

• IE6 does not support min-height. The solution is to use css hack:

. Target {min-height: 100px; height: auto! Important; height: 100px; // The content height in IE6 exceeds the automatically extended height}

• olInternalliThe serial number is 1, not increasing. Solution: Set the style for lidisplay: list-item;
• Uncertain parent Elementoverflow: auto;, Includingposition: relative;Child element, which overflows when the child element is higher than the parent element. Solution: 1) remove the child elementposition: relative;; 2) When positioning cannot be removed for the child element, the parent Elementposition: relative;

<Style type = "text/css">. outer {width: 215px; height: 100px; border: 1px solid red; overflow: auto; position: relative;/* Fix bug */}. inner {width: 100px; height: 200px; background-color: purple; position: relative ;} </style> <div class = "outer"> <div class = "inner"> </div>

• IE6 only supportsaLabel:hoverPseudo class. Solution: Use js to listen to the mouseenter and mouseleave events for the element and add the class to achieve the effect:

<style type="text/css">.p:hover,.hover {    background: purple;}</style><p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p><script type="text/javascript">function addClass(elem, cls) {    if (elem.className) {        elem.className += ' ' + cls;    } else {        elem.className = cls;    }}function removeClass(elem, cls) {    var className = ' ' + elem.className + ' ';    var reg = new RegExp(' +' + cls + ' +', 'g');    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');}var target = document.getElementById('target');if (target.attachEvent) {    target.attachEvent('onmouseenter', function () {        addClass(target, 'hover');    });    target.attachEvent('onmouseleave', function () {        removeClass(target, 'hover');    })}</script>

• IE5-8 not supportedopacity, Solution:

.opacity {    opacity: 0.4    filter: alpha(opacity=60); /* for IE5-7 */    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/}

• Set IE6heightLessfont-sizeThe time height isfont-size, Solution:font-size: 0;
• IE6 does not support PNG transparent backgrounds. Solution: Use GIF images in IE6
• IE6-7 not supporteddisplay: inline-blockSolution: Set inline and trigger hasLayout

    display: inline-block;    *display: inline;    *zoom: 1;

• In IE6, the margin of the floating element that is in contact with the parent element boundary in the floating direction is doubled. Solution: 1) Use padding to control the padding. 2) floating Elementdisplay: inline;This solves the problem without any side effects: the floating element display: inline is automatically adjusted to block according to the css standard.
• When the width and left and right margin of block-level elements are set to auto, IE6 cannot center horizontally. Solution: Set the parent Elementtext-align: center;