IEのバグリストとソリューション

外国人http://haslayout.net/css/サイト上で、システムが共有し、IEのバグのいくつかをまとめたもの

このサイトでは、46「普通のバグ」、5 Geの「バグのレイアウト」、6 Geはと「IEのクラッシュバグ」「バグを回避することができます」が含まれて58枚のガイドラインやバグを持っているすべてが70のソリューション。

IEのCSSのバグ:通常のバグ

この部分は  IEの  バグは、より一般的な他のタイプに起因する、またはバグの種類を複数に所属することはできません。

一般的なInternet Explorerの CSSの バグ
ソリューション名 IEのバージョン 説明
画像のラベルのフォーカスバグ(图片ラベルのバグ) IE8、IE7、IE6 ラベルには、選択したフォーム要素のイベントにIMGクリックを誘発していない場合。
NOボタン矛盾ONオートセンターマージン(設定マージンオートボタンが中央にされていません) IE8 {:;:自動;マージン右:余白左ブロックディスプレイ自動;}のようなボタンような標識(例えば、ボタン入力[タイプ=「ボタン」]入力[タイプ=「提出」])を設けた場合の幅を設定していない場合中央にない場合。
バグをラップにシュリンクフロートここで誤った(間違ったレイアウト浮動ストレッチ) IE7、IE6 連続浮動要素と明確な自動伸縮を提供していない属性。
オーバーフロー矛盾スクロールバードキュメント(文書のスクロールバグ) IE7、IE6 オーバーフローの上に身体に影響を与える可能性があるhtmlタグのオーバーフローに設定されていません。
バグ奇妙なギャップフロートをつまんで(連続バグフロート) IE7、IE6 ギャップは、垂直に積層され、最後と最後の浮上第二の要素の間に現れます。
重複した最後の文字のバグフロートをつまん(浮動文字は、連続的な繰り返し文字を表示されます) IE7、IE6 上記の解決策は、それが幅を追加することによってである、類似しており、これは、文字と浮動位置を与えることである:相対。
身長バグ要素空(空の要素の高さのバグ) IE7、IE6 空のレイアウト要素は非常にあったです
ダブルマージンバグコントロールフォーム(form要素ダブルマージンバグ) IE7、IE6 入力およびTextAreaは、マージンレベルの親要素を継承するかもしれません
表示されますが、IE7のバグを破線1PXとしての点線ボーダー(1pxの点線の境界線がIE7のバグが境界線を破線となります) IE7 1pxの点線の境界線を設定すると、1ピクセルよりも大きな幅を有する境界線は
、その後、他の境界線スタイルを向けるだろう1pxの破線れます
相対オーバーフロー失敗バグ(オーバーフローのバグ) IE7、IE6 オーバーフロー設定する場合:隠されたまたは自動要素をサブ要素の相対的位置を提供されている場合、オーバーフローは、動作しない
演奏スタイルが表示され、親要素溶液位置に追加される:相対。
IE7「壊れた」:ホバー絶対バグ(の悪いIE7:絶対位置のバグをホバー) IE7 場合は、子要素の集合とすることによってのような絶対的な左上を提供することにより:ディスプレイが動作しません変更し、彼らは親要素の視覚的な範囲内で、もはやであれば、位置解をするときのmargin-leftホバーそれを追加することではありません。 0%。
背景シフトにボタン:アクティブなバグ(:アクティブボタンはバックグラウンドオフセット) IE8 ボタンを設定するには:アクティブ・バックグラウンド・シフトによって提供される、行います:このオフセット変更する場合、アクティブ-ms-背景位置xと-ms背景位置-Y。
無視された:フォーカスバグ   IE8 ルールセット、セレクタが含まれています別の簡単な選択が続いているフォーカスが、無視され
ホバーボーダーバグ見えない(:国境バグを消えホバー) IE8 その後、要素のアウトラインのセット、およびを設定すると:あなたが境界線を設定した場合、それは表示されません、時間を置きます
パディングマージンバグ率(パーセントパディング垂直マージンのバグ) IE8 当父元素设置了百分比的padding,子元素有垂直的margin的时候,
就好像父元素被设置了margin一样,解决方法是给父元素加一个overflow:hidden/auto
Image Float Bullet Chaos Bug (图片浮动List标记错位bug) IE8 当List里面有浮动的image时,List标记显示的位置跑在里面了,可以通过使用背景图片代替List自带的标记来解决。
Non-Inherited TH Text-Align Bug (TH没有继承Text-Align属性的bug) IE8 当给table设置text-align时,TH没有继承样式,可以通过给TH设置text-align:inherit;来解决IE8下这个丑陋的bug。
32 Styles Limitation (32个Style限制) IE8, IE7, IE6 在32个”style”方法(style, link, @import)后浏览器会忽略后面的样式
Hover White Background Ignore Bug (白色背景hover bug) IE7 background 不会因为 :hover而改变,给hover设置background-color:#ffffff;时,背景不会改变,解决方法是设置background:#ffffff;
IE7 Child Selector Comment Bug IE7 一个 selector 包含了一个子的selector,如果后面跟着一个注释,则会被完全忽略。
Star HTML Bug (* html bug) IE6 * html [selector]在ie6下通常不会被忽略,这个bug通常被用来作IE6的hack使用。
IE6 !important Ignore Bug IE6 !important 关键字会忽略,important之后设置同样的规则后important会被忽略,这个bug也常被用来指定ie6的样式。
PNG Image and Background Color Mismatch (png图片和背景颜色不一致) IE8 ,IE7,IE6 设置背景颜色和png图片背景同样的颜色代码最后表现不一致,原来是因为ie支持“PNG Gamma profiles”,解决方案是通过一个pngcrush程序来优化图片。而他们本来是一致的。IE认为这是他一个Feature。太可笑了。
No Auto Margin Center Pseudo-Bug IE8 ,IE7,IE6 如 果把margins 设置成 `auto` ,IE不会把组件放置在中间的位置。所有的浏览器都会,只有IE不会。给block元素设置margin auto无法居中,出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上<!DOCTYPE html>就可以了。
:first-line !important Rule Ignore Bug (:first-line/:first-letter里的!important会忽略) IE8 如果在伪class :first-line 内使用!important,那么其所有定义会被忽略。
:first-letter Ignore Bug IE6 当:first-letter前面有逗号的时候ie6会忽略这条规则,解决方法是将:first-letter放到最后。
:first-letter !important Rule Ignore Bug IE8 如果在伪class :first-letter内使用!important,那么其所有定义会被忽略。
Partial Click Bug v2 E7,IE6 设置了整个区域是可以点击的,但在IE中只有文本可以点击。
Staircase Bug E7,IE6 浮动的元素排序起来就像一个楼梯。
Disappearing List Background Bug IE6 B <li>, <dt>, <dd> 没有背景。
noscript Ghost Bug IE8,IE7,IE6 <noscript> 标识中只有 borders/background 才有用。
No Transparency Click Bug (透明区域无法点击bug) IE8,IE7,IE6 背景透明的图片在作为链接时,并且其“filter”被设置成了PNG透明,但其背景还是不可点击。
List Drop Shift Bug (List标记偏移) IE8 在<li> 中的内容被换行了。 当给list里面的元素设置display和overflow属性后List标记会偏移,解决方法是给里面的元素加一个float:right; width:100%;可以使用ie的条件注释针对ie8
No Increase on <ol> Numbers Bug (ol数字标记不自增) IE7,IE6 <ol> 中的 <li> 列表序号不会增加。 当给li设置宽度时会触发这个bug,解决方法是给li设置display:list-item .
No Bullets on <ul> and <ol> Bug (ul/ol标记消失bug) IE7,IE6 在<ul> 和 <ol> 中看不到列表序号/数字了。 当ul/ol触发了layout并且有margin-left会触发这个bug,解决方案是给li设置margin-left .
No line-height Vertical Center on Images Bug (图片不垂直居中) IE7,IE6 图片使用line-height 方法不能垂直居中. 当使用line-height来居中图片时在ie6/7下不会生效,解决方法是在img后加一个空白元素如<span></span>.
No Background Image Bug (没有背景图片bug) IE8,IE7,IE6 在IE中使用background无法定义背景图. 当使用background的时候如果在url()后没有加空格背景图片就不会显示。
Custom Cursor Bug (自定义鼠标bug) IE8,IE7,IE6 自定义鼠标不工作. 当自定义鼠标样式的时候,如果url()里面的路径是相对路径的话,ie会认为相对于当前文档而不会出现鼠标样式的图片,解决方法是采用绝对路径。
Leaking Background Bug (背景溢出bug) IE6 背 景从一个元件的内部溢出到外部. 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug,解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动,可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1;来触发ie的 layout
Expanding Height Bug (高度扩展bug) IE6 元件的高度比指定的要长得多。 当高度很窄如小于12px时ie6会扩展高度,解决方法是设置overlfow:hidden或font-size:0;
Expanding Width Bug (宽度扩展bug) IE6 元件的宽度比指定的要长得多。 当连续英文字符的时候设定宽度不起作用,解决方法是设置overflow:hidden或word-wrap:break-word;
Double Margin Bug (浮动双margin) IE6 float元件的左和右的空白(margins)被加倍了。 当给一个浮动元素设置margin-left或margin-right时margin加倍,解决方法是加上一条display:inline;
Negative Margin Bug (负margin bug) IE7,IE6 如 果使用负数来指定页白(margins)里面的元件会被外面的元件所遮挡。 当给一个有layout容器里面的元素设置负marin时内容会被截断,解决方法是不让容器有layout或者给负marin的元素设置 position:relative;zoom:1;
Italics Float Bug IE6 float的元件中的字体会被设置成倾斜。
3px Gap Bug aka Text Jog Bug (3px间距bug) IE6 下一个float的元件不是有一个3px的空隙,就是被换行了。 当几个连续浮动且有layout的元素排列时会有3px的间距,解决方法就是给这些元素设置3px的负margin或加上overflow:hidden;
Text-Align Bug IE7,IE6 text- align属性会影响整个元件内的所有内容。 当容器外面设置了text-align,如果容器里面有文本和其他block的元素, block的元素也会继承text-align,这是不正确的,解决方法是重新写出合理的有语义的markup,如文本外面加一个p.

IE的CSS Bug:布局类 Bug

hasLayout Internet Explorer CSS Bugs
解决方法名称 IE的版本 描述
Scared of Floats Bug IE7, IE6 elements with layout clear floats instead of going around floated elements
Border Chaos Bug IE6 连框显示是混乱的
Sub-Hover Bug IE6 一些selectors 如 a:hover foo{} 无法正常工作
Partial Click Bug IE6 在定义了display: block的链接中(<a>) 只有文本是可以点的。
Disappearing Content Bug IE6 当我们滚动窗口的时候,或是最大化最小化窗品的时候,有一些内容会重复显示。

IE的CSS Bug:不支持的功能

No Support Workarounds
解决方法名称 IE的版本 描述
No Child Selector Support Workaround IE6 子 selector 将被忽略
Max-Height Workaround IE6 max-height 不支持
Max-Width Workaround IE6 max-width 不支持
Opacity IE8,IE7,IE6 opacity 属性不支持
Min-Width Workaround IE6 min-width 属性不支持
Min-Height Workaround IE6 min-height 属性将被忽略

IE的CSS Bug:程序崩溃 Bug

これは、全体BUG引き起こす可能性があります  IEの  クラッシュを。

クラッシュバグ
ソリューション名 IEのバージョン 説明
ホバークラッシュバグ IE6 あなたがマウスを移動する場合:リンクを置く、ブラウザがクラッシュします。

オリジナル英語出典:のhttp://haslayout.net/css/

中国語の翻訳出典:のhttp://coolshell.cn/のp = 1245?

ます。https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661296.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_33918357/article/details/93058127