IE CSS Bugs 列表和解決方法

時間 2019-11-24

標籤 css bugs 列表解決方法欄目 CSS 简体版

原文原文鏈接

咱們在開發中咱們常會在IE中遇到不少莫名的bug，尤爲是老態龍鍾的IE6瀏覽器。爲了提升咱們的開發效率，須要常常總結，整理工做中遇到的問題。咱們在網絡上找到的IE Bugs 資料是零散的。不過，在老外的http://haslayout.net/css/網站上,他就係統的總結了IE的一些Bugs，分享一下。css

目前，這個網站上包含了 46 個「普通的Bug」， 5個「佈局方面的Bug」，6 個「能夠繞開的Bug」以及 1 個「IE崩潰的Bug」，全部的這些Bug有58個指南和70個解決方法。html

這個列表目前更新到：2009年8月19日，週三，15時38分47秒。shell

最新發表的教程：該網站包含44 IE6 bugs, 28 IE7 bugs 和19 IE8 bugs.瀏覽器

下面是全部的bug列表，你能夠點擊每一個BUG名的連接查看更詳細的說明和解決方法。網絡

IE的CSS Bug：普通Bug

這部分 IE 的 bug 是比較普通的沒法歸到其它種類，或是同時屬於多個種類的Bug。app

General Internet Explorer CSS Bugs
解決方法名稱	IE的版本	描述
Image Label Focus Bug(圖片label bug)	IE8, IE7, IE6	當label中有img的時候沒法觸發點擊選中form元素事件.
No Auto-Margin Center on Buttons Inconsistency (設置margin auto的button沒有居中)	IE8	若是給像button這樣的標籤（如button input[type="button"] input[type="submit"]）設置{ display: block; margin-left: auto; margin-right: auto; }若是不設置寬度的話沒法居中。
Incorrect Float Shrink-Wrap Bug (不正確的浮動伸展布局)	IE7, IE6	連續浮動的元素而且設置clear屬性無法自動伸展。
Document Scrollbars Overflow Inconsistency （文檔滾動bug）	IE7, IE6	不在html標籤上設置overflow或許會影響到body上面的overflow。
Float Squeeze Weird Gap Bug （連續浮動元素bug）	IE7, IE6	A gap appears between last and second last floated elements that are stacked vertically.
Float Squeeze Duplicate Last Character Bug （連續浮動字符出現重複字符）	IE7, IE6	這個和上面的解決方案都差很少，它是經過加一個寬度，而這個是經過給浮動字符加一個position:relative;
Empty Element Height Bug （空元素高度bug）	IE7, IE6	有layout的空元素得到了高度
Form Control Double Margin Bug （表單元素雙margin bug）	IE7, IE6	input和textarea或許會繼承父元素的水平的margin
IE7 1px Dotted Border Appears As Dashed Bug （ie7的1px dotted 邊框變成dashed邊框的bug）	IE7	當設置了1px dotted邊框後，有一個邊框的寬度大於1px 的話其它爲1px邊框會變爲dashed的樣式
Relative Overflow Failure Bug（overflow bug）	IE7, IE6	當設置了overflow:hidden或auto的元素，若是子元素設置了相對定位，overflow就不起做用了，表現的是visible的樣式，解決方法是給父元素加一個position:relative;
IE7 "Broken" :hover Absolute Bug （ie7的壞的:hover 絕對定位bug）	IE7	當子元素設置了absolute而且經過設置left top 等來經過:hover時改變其顯示位置時將會不起做用若是他們再也不父元素的可視範圍內，解決方法是給其加上margin-left:0%;
Button Background Shift On :active Bug（當:active時Button背景偏移）	IE8	給button設置:active時背景會作偏移，能夠經過設置:active時的-ms-background-position-x和-ms-background-position-y來改變這個偏移。
Ignored :focus Bug	IE8	A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored
Invisible Hover Border Bug （:hover邊框消失bug）	IE8	當設置了outline的元素後，再設置:hover的時候，若是設置邊框的話，將會不顯示
Percentage Padding Margin Bug （百分比padding垂直margin bug）	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 屬性將被忽略