IE6~IE7のバグ_html/css_WEB-ITnose

もともと IE のバグについてまとめを書きたかったのですが、IE のバグは一般的に IE5、IE6、IE7 という非常に古いブラウザーに存在することがわかりました。さらに、これらのバグは、IEtester と IE10 のドキュメント モードの選択にいくつかのばらつきがあり、最も正確な方法は、現在の Web 開発 IE5 にシステム テストをインストールすることです。一般的に、Web サイトはブラウザのバージョンを検出し、ユーザーにブラウザのアップグレードを促すため、現在の開発でこれらのバグが発生する可能性は非常に低いです。 。これを要約する理由は、場合によっては、一部のブログや書籍、さらには CSS の理解をテストするためにこれらを選択する一部の企業の筆記テストにもこれらのバグが含まれるためです。そこで私は、人々が木を植え、他の人に木陰を楽しんでもらうという原則に基づいて、オンラインで学習できるいくつかの良いリソースを見つけることにしました。 Xunmimi は、W3C Plus で Webmaster Desert のブラウザ互換性に関する取り組みを見つけました。要約は比較的体系的で読みやすいものになっています。これを学習の主なリソースとして使用しましょう。リンクは次のとおりです:

ブラウザ互換性の取り組みの最初の目的: 条件付きスタイルの作成方法

ブラウザ互換性の取り組みの第 2 目的地: 各ブラウザでの書き方のハック (より包括的な情報については、を参照してください) Kui Zhongjian の CSS Hack Table へ)

ブラウザ互換性の旅の 3 番目の目的地: IE の一般的なバグ??パート 1

ディレクトリ構造

: 10 の古典的なバグの原因

1. 浮動要素のダブルマージン バグ

2. ボックスモデルのバグを克服する

3. 要素の最小高さと最小幅を設定する

4. ブロック要素を水平方向に中央揃えにする

5. リスト li の階段バグ

6. li 空白

7. IE6 では要素のマイクロ高さを設定できません

8. overflow:auto とposition:relative の衝突

9. フローティングレイヤーの位置ずれ

10. IE6 でのいないいないばぁ

ブラウザ互換性の旅の 4 番目の目的地: IE の一般的なバグ??パート 2

ディレクトリ構造

: IE のバグ処理

1. IE6 クローン テキストのバグ

2. IE での画像のスケーリング バグ

3. PNG 画像の透明度IE6 でのバグ

4.

5. IE ブラウザのデフォルトの垂直スクロール バーを無効にする

6. IE6 でのホバー擬似クラスのバグ

7. min-width/max- width と max-heigt/min-height のバグを修正

8. Position:relative のバグを修正

9. margin の負の値を修正

10. オーバーフローの問題を修正

ただし、記事内のいくつかの場所はあまり正確ではなく、いくつかの詳細が説明されています。十分に明確ではないため、以下にいくつかの修正と追加を行います:

1) まず停止します

IE10 と IE11 は条件付きコメントをサポートしなくなりました。詳細については、IE の公式手順を参照してください。条件付きコメントはサポートされなくなりました。条件付きコメントに加えて、IE では従来サポートされていた機能に多くの変更が加えられました。 従来からサポートされていた機能への変更

2) 3 番目のステーション

IE6 以前のバージョンでは、min-height は認識されませんが、高さは認識されません。 IE6 以前のバージョンでは属性は min-height に解析されるため、要素の最小高さは IE6 固有のハックとして設定できます。これは次のように記述されます。 3) 不具合の補足

1.

IE6, IE7

:ul要素 Layout属性を付けると箇条書きが消えます。

-------------------------------------------- --- ----------栗をください ------------------------ ---- ------------------

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="/static/imghwm/default1.png"  data-src="i.png"  class="lazy" alt="IE6~IE7のバグ_html/css_WEB-ITnose" ></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%；

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

 

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

 

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