IE6 ~ IE7 bugs and ie6ie7bugs

IE6 ~ IE7 bugs and ie6ie7bugs

I wanted to write a summary about IE bugs, but I found that the IE bugs generally exists on IE5, IE6, and IE7, which are very old browsers. In addition, these bugs tests are quite troublesome. There are some deviations between the IEtester and IE10 document modes. It is most accurate to install system tests on virtual machines, the most important reason is that the current Internet Explorer 5 is not considered. IE6 and Internet Explorer 7 are about to exit the historical stage. Generally, the website will detect the browser version and prompt the user to upgrade the browser, therefore, the chances of these buckets in current development are very low.

The reason is that, in the course of study, some blogs or books will involve these buckets, even some companies like to pick out these in the written test to test whether your understanding of CSS is deep enough. So I went online to find some good resources to learn based on the principle that people are enjoying the cold. Searching and searching finally found the webmaster's desert browser compatibility on W3C Plus. There are four articles in total, which are more systematic and more readable. Let's take this as the main resource to learn. The link is as follows: the first stop of the browser compatibility Journey: How to Create a conditional style browser compatibility Journey: the Hack writing method of Each browser (for more comprehensive information, refer to the CSS Hack Table of Kwai Zhongjian) third Site of the browser compatibility Journey: common Bug of IE-part1 Directory structure: Causes of ten Typical Bugs 1. Double Margin Bug of floating elements 2. Bug of overcoming Box Model 3. setting the minimum height and width of elements 4. horizontal center of block elements 5. List of li's stair Bug 6. li blank spacing 7. Micro-height 8 and overflow of elements cannot be set under IE6: auto and position: relative collision 9. floating layer dislocation 10. Fourth site on the Compatibility tour of Internet Explorer 6: common Bug of Internet Explorer-part2 Directory structure: IE Bug handling 1. Bug 2 of clone text in IE6, IE film scaling Bu 3, PNG Image transparency Bug in IE6 4. <IFrame> transparent background Bug 5. Disable default vertical layout in IE scroll bar 6 and IE6: hover pseudo-class Bug 7. Bug fixing of min-width/max-width and max-heimpaired/min-height 8. Fixed position: bug 9 of relative, fixed the negative value of margin, fixed the problem of overflow. However, some of the content in the article is not very accurate, and some details are not clear enough. So we will make some corrections and supplements below: 1) the first station IE10 and IE11 do not support conditional comments. For details, refer to the official instructions of IE: the conditional comments are no longer supported. In addition to the conditional comments, many features supported by IE are changed: traditional features can be changed. 2) The third site IE6 and earlier versions do not know min-height, but the height attribute is resolved to min-height in IE6 and earlier versions, therefore, when setting the minimum height of an element, it can be IE6-dedicated hack, that is, written:

1 min-height: 100px; 2 _ height: 100px;/* compatible with IE6 -*/

3) bugs Supplement 1, IE6, IE7: After the ul element has the Layout attribute, the project symbol will not be seen. -------------------------------------------------------HTML:

1 <ul> 2 <li> unordered list </li> 3 <li> unordered list </li> 4 <li> unordered list </li> 5 </ul>

CSS:

1 ul{2     zoom:1;3 }

IE6 and IE7 are as follows: Solution: Add padding-left: 1em for ul;

1 ul{2     zoom:1;3     padding-left: 1em;4 }

Then it is normal. ----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------2, IE6, IE7: In an ordered list, any list item element with the Layout feature has an independent counter. -------------------------------------------------------HTML:

1 <ol> 2 <li> ordered list </li> 3 <li> ordered list </li> 4 <li style = "zoom: 1; "> ordered list </li> 5 <li> ordered list </li> 6 <li> ordered list </li> 7 </ol>

IE6 and IE7 are as follows: Solution: Define the sequence number by yourself. The ordered list ol label is not used. ----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------  3. IE6 and IE7: if a list item has the Layout attribute, when the Layout list item element is displayed across rows, the project symbol is displayed as the bottom alignment, instead of alignment at the top of the general mindset. -------------------------------------------------------HTML:

1 <ol> 2 <li> ordered list </li> 3 <li> ordered list </li> 4 <li style = "zoom: 1; "> ordered list <br> ordered list </li> 5 <li> ordered list </li> 6 <li> ordered list </li> 7 </ol>

IE6 and IE7 are shown as follows: the bug of counting again also occurs. Solution: Same as above. Define the serial number by yourself. The ol label of the ordered list is not used. ----------------------- -------------------------------- After eating the chestnuts -------------------------------------------------------  4. Again, in IE6When the list item element li contains a hyperlink element displayed in blocks, spaces between the list elements are not ignored, and an additional line is added. -------------------------------------------------------HTML:

1 <ol> 2 <li> <a href = "#"> links in the ordered list </a> </li> 3 <li> <a href = "#"> link in the ordered list </a> </li> 4 <li> <a style = "display: block; "href =" # "> links in the ordered list </a> </li> 5 <li> <a href =" # "> links in the ordered list </a> </li> 6 </ol>

IE6 performs normally as follows: Solution: You only need to trigger the hasLayout attribute for the Tag Element that defines the display: block:

1 <ol> 2 <li> <a href = "#"> links in the ordered list </a> </li> 3 <li> <a href = "#"> link in the ordered list </a> </li> 4 <li> <a style = "display: block; zoom: 1; "href =" # "> links in the ordered list </a> </li> 5 <li> <a href =" # "> links in the ordered list </a> </li> 6 </ol>

----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------  5, IE6: After the position: relative inclusion block is set to trigger the hasLayout attribute, the IE browser can locate the position normally. -------------------------------------------------------HTML:

1 <span class="wrap">2     wrap3     <div class="box">4     </div>5 </span>

CSS:

 1 .wrap { 2     margin: 100px; 3     position: relative; 4     border: 1px solid #aaa; 5 } 6 .box { 7     position: absolute; 8     left: 100px; 9     top: 100px;10     width: 100px;11     height: 100px;12     background: #ccc;13 }

IE6 performs as follows: its normal performance is as follows: solution. To be honest, there are not many opportunities for such a situation, because it is unreasonable to construct a block-level element in a row, to clarify the bugs of IE6, the solution is to trigger the hasLayout attribute of the parent element, that is, to add _ zoom: 1, which is compatible with IE6:

1 .wrap {2     margin: 100px;3     position: relative;4     border: 1px solid #aaa;5     _zoom:1;6 }

However, in fact, this hack is not recommended. IE6 does not behave in the same way as standard browsers. In-row elements show the features of block-level elements, and the upper and lower margin values become effective: ----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------
6, IE6: Example of hover bug -------------------------------------------------------HTML:

1 <a href = "#"> menu item  </a>

CSS:

 1 a{ 2     text-decoration: none; 3 } 4 a img{ 5     display: none; 6     border:none; 7 } 8 a:hover img{ 9     display: inline;10 }

In a standard browser, when the mouse is over the link, the picture will appear, but IE6 has no effect: the reason is that a: hover does not have the hasLayout feature, so it is easy to solve the problem, activate the hasLayout attribute of a: hover:

1 a:hover{2     _zoom:1;3 }

----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------
6, IE6This bug is not detailed in the blog. Here is an example to help you understand it. -------------------------------------------------------HTML:

1 <div class = "wrap"> 2 <div class = "float"> floating hyperlink </div> 3 <div> <a href = "#"> hyperlink </> </div> 4 <div> <a href = "#"> hyperlink </a> </div> 5 <div> <a href = "#"> hyperlink </a> </div> 6 <div> <a href = "#"> hyperlink </a> </div> 7 <div class = "clearfix"> </div> 8 </div>

CSS (with/**/indicates the required attribute to trigger this bugs ):

 1 .wrap { 2     background: #aaa;/**/ 3     border: 1px solid #666;/**/ 4 } 5 .wrap a:hover { 6     background: blue;/**/ 7 } 8 .float { 9     float: left;/**/10     border: 1px solid green;11     width: 120px;12     height: 150px;/**/13 }14 .clearfix {15     clear: both;/**/16 }

IE6 performs as follows:
However, in IE7, I found that the unfloating hyperlink on the right is gone, and the mouse is changed to the pointer style, but it is difficult to click it. Here we record it and it is estimated that it is also bugs: Solution: This bugs will not be triggered if one of the preceding attributes does not exist. You can also avoid this by triggering the hasLayout attribute of. wrap or. floatfix, that is, adding the attribute _ zoom: 1; ----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------7, IE6This problem occurs when HTML comments are added between floating elements. -------------------------------------------------------HTML:

1 <div class = "wrap"> 2 <div> I am the first div </div> 3 <! -- Comment --> 4 <div> The following contains redundant characters </div> 5 </div>

CSS:

1 .wrap div{2     float: left;3     width: 100%;4 }

IE6 performs as follows: Solution: Remove the comment, or do not set width: 100%; ----------------------------------------------------------- After the completion of the chestnut -------------------------------------------------------  Some of the above examples are collected online, and some examples in some books may be supplemented later. Here, I would like to thank the desert webmaster for his summary and sharing. The level is limited. correct the error. For original blog posts, please indicate the source.