外国人http://haslayout.net/css/サイト上で、システムが共有し、IEのバグのいくつかをまとめたもの
このサイトでは、46「普通のバグ」、5 Geの「バグのレイアウト」、6 Geはと「IEのクラッシュバグ」「バグを回避することができます」が含まれて58枚のガイドラインやバグを持っているすべてが70のソリューション。
IEのCSSのバグ:通常のバグ
この部分は IEの バグは、より一般的な他のタイプに起因する、またはバグの種類を複数に所属することはできません。
ソリューション名 | 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
解决方法名称 | 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:不支持的功能
解决方法名称 | 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で再現