IE6~IE7 bugs_html/css_WEB-ITnose

I originally wanted to write a summary about IE bugs, but I found that IE bugs generally exist in IE5, IE6, and IE7, which are all very old browsers. Moreover, these bugs are quite troublesome to test. There are some deviations in the document mode selection of IEtester and IE10. The most accurate way is to install the system test on a virtual machine. The most important reason is that the current web development IE5 basically does not After considering it, IE6 and IE7 are about to completely withdraw from the stage of history. Generally, websites will detect the browser version and prompt users to upgrade the browser, so the chance of encountering these bugs in current development is very low.

The reason why I want to summarize is because occasionally during the learning process, some blogs or books will involve these bugs, and some companies even like to pick these out in their written exams to test your understanding of CSS. Deep enough. So I decided to go online and find some good resources to learn based on the principle of people planting trees and letting others enjoy the shade. Xunmimi finally found Webmaster Desert’s browser compatibility journey on W3C Plus. There are four articles in total. The summary is relatively systematic and readable. Let’s use this as the main resource for learning. The links are as follows:

The first stop on the browser compatibility journey: How to create conditional styles

The second stop on the browser compatibility journey: Each browser Hack writing method of browser (for more comprehensive information, please refer to Kui Zhongjian’s CSS Hack Table)

The third stop on the browser compatibility journey: IE common bugs??part1

Table of contents Structure :

Ten classic causes of bugs

1. The bug of double margin of floating elements

2. Overcoming the bug of Box Model

3. Set the minimum height and minimum width of the element

4. Horizontally center the block element

5. Staircase bug in list li

6. li white space

7. The micro-height of elements cannot be set under IE6

8. Collision between overflow:auto and position:relative

9. Dislocation of floating layers

10. Peek-a-boo under IE6

The fourth stop on the browser compatibility journey: IE common bugs??part2

Directory structure :

IE bug handling

1. IE6 clone text bug

2. Image scaling bug under IE

3. PNG image transparency bug under IE6

4. eb18c51b0a17d127a2d880c7e439d2ad transparent background bug

5. Disable the default vertical scroll bar of IE browser

6. Under IE6: hover pseudo-class bug

7. Fix the bug of min-width/max-width and max-heigt/min-height

8. Fix the bug of position:relative

9. Fix the negative value of margin

10. Fix the overflow problem

However, some parts of the article are not very accurate, and some details are not clear enough, so some corrections and additions are made below:

1) First stop

IE10 and IE11 no longer support conditional comments. For details, please refer to IE’s official instructions: Conditional comments are no longer supported. In addition to conditional comments, many of IE’s traditionally supported functions have been changed. : Traditional functions support changes

2) The third station

IE6 and lower versions do not recognize min-height, but the height attribute is parsed into min-height in IE6 and lower versions. Therefore, when setting the minimum height of an element, you can use an IE6-specific hack, which is written as:

1 min-height：100px；2 _height：100px；/*兼容IE6-*/

3) Supplement of bugs

1. IE6, IE7: ul element has Layout attribute Afterwards, the bullets will disappear.

---------------------------------- --------------------Give me an example------------------------------ ----------------------------

HTML:

1 <ul>2     <li>无序列表</li>3     <li>无序列表</li>4     <li>无序列表</li>5 </ul>

CSS：

1 ul{2     zoom:1;3 }

IE6，IE7 表现如下：

正常表现应该如下：

解决方法：

为ul添加 padding-left:1em;

 

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

则表现正常。

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

2、 IE6，IE7：有序列表中，任何具有 Layout 特性的列表项元素都会拥有独立的计数器。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <ol>2     <li>有序列表</li>3     <li>有序列表</li>4     <li style="zoom:1;">有序列表</li>5     <li>有序列表</li>6     <li>有序列表</li>7 </ol>

IE6，IE7 表现如下：

解决方法：

自己定义序号，不使用有序列表 ol 标签。

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

3、IE6，IE7：如果一个列表项拥有 Layout 属性，当该 Layout 列表项元素跨行显示时，项目符号会显示为底部对齐，而不是按照一般的思维习惯顶部对齐。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <ol>2     <li>有序列表</li>3     <li>有序列表</li>4     <li style="zoom:1;">有序列表<br>有序列表<br>有序列表</li>5     <li>有序列表</li>6     <li>有序列表</li>7 </ol>

IE6，IE7 表现如下：

 

这里也同时出现了重新计数的bug。

解决方法：

同上，自己定义序号，不使用有序列表 ol 标签。

----------------------- --------------------------------吃完栗子-------------------------------------------------------

 

4、再之，在 IE6中，当列表项元素 li 中包含有块状显示的超链接元素时，列表元素之间的空格将不会被忽略，而会额外增加一行。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <ol>2     <li><a href="#">有序列表中的链接</a></li>3     <li><a href="#">有序列表中的链接</a></li>4     <li><a style="display:block;" href="#">有序列表中的链接</a></li>5     <li><a href="#">有序列表中的链接</a></li>6 </ol>

IE6 中的表现如下：

IE7 表现正常：

解决方法：

只需要为定义了 display:block 的 a 标签元素触发 hasLayout 属性：

 

1 <ol>2     <li><a href="#">有序列表中的链接</a></li>3     <li><a href="#">有序列表中的链接</a></li>4     <li><a style="display:block;zoom:1;" href="#">有序列表中的链接</a></li>5     <li><a href="#">有序列表中的链接</a></li>6 </ol>

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

5、 IE6：当设置了 position:relative 的包含块触发了 hasLayout 属性后，IE 浏览器才能够正常地进行定位。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

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 表现如下：

 

正常表现如下：

 

 

解决方法，说实话遇到这种情况的机会实在不多，因为需要一个行内元素包围一个块级元素，从结构上就是不合理的，但是为了说明清楚 IE6 的bugs，这里还是说一下解决的方法，就是触发父元素的 hasLayout 属性，即添加 _zoom:1，兼容 IE6：

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

但其实这种 hack 并不推荐，IE6 的表现并不和标准浏览器一致，行内元素表现出了块级元素的特点，上下的 margin 值变得有效了：

 

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

6、 IE6 :hover 的bug

直接上例子

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <a href="#">菜单项目<img src="i.png"></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 }

标准浏览器下，当鼠标在链接上时，图片会显现，但是IE6没有效果：

原因是 a:hover 不具有 hasLayout 特性，故解决的方法也很容易，即激活 a:hover 的 hasLayout 属性：

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

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

6、 IE6 躲猫猫bug

大漠的博文中没有对这个 bug 的具体例子，这里举个具体例子帮助理解。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <div class="wrap">2     <div class="float">浮动超链接</div>3     <div><a href="#">超链接</a></div>4     <div><a href="#">超链接</a></div>5     <div><a href="#">超链接</a></div>6     <div><a href="#">超链接</a></div>7     <div class="clearfix"></div>8 </div>

CSS（其中跟/**/的表示触发这个 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表现如下：

但我在 IE7 中却发现右边没浮动的超链接不见了，鼠标放上去会变成 pointer 样式，但是很难点击，这里记录一下，估计也是 bugs：

解决方法：

以上必须的属性只要有一个不存在就不会触发这个 bugs，也可以通过触发 .wrap 或 .floatfix 的 hasLayout 属性来规避，即添加属性 _zoom:1;

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

7、 IE6 多余字符 bug

在浮动元素之间增加 HTML 注释时就会出现这个问题，上例子。

 

-------------------------------------------------------举个栗子-------------------------------------------------------

HTML：

1 <div class="wrap">2     <div>我是第一个div</div>3     <!-- 注释 -->4     <div>下面会出现多余的字符</div>5 </div>

CSS：

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

IE6表现如下：

解决方法：

去掉注释，或者不设置 width:100%；

-------------------------------------------------------吃完栗子-------------------------------------------------------

 

以上的例子有些是网上搜集，有些书中的例子，以后可能会再补充，也欢迎大家补充。在这里也感谢大漠站长的总结和分享。

 

水平有限，错误欢迎指正。原创博文，转载请注明出处。