任何人都可以向我解釋爲什麼在這個特定的IE黑客的寬度屬性拼寫錯誤?爲什麼在這個IE瀏覽器CSS拼寫錯誤?
* html #container a.slided {
width:91px;
w\idth:93px;
}
順便說一句,這裏是從那裏我已經看到了代碼的鏈接: IE的http://www.webreference.com/programming/css_gallery/3.html
任何人都可以向我解釋爲什麼在這個特定的IE黑客的寬度屬性拼寫錯誤?爲什麼在這個IE瀏覽器CSS拼寫錯誤?
* html #container a.slided {
width:91px;
w\idth:93px;
}
順便說一句,這裏是從那裏我已經看到了代碼的鏈接: IE的http://www.webreference.com/programming/css_gallery/3.html
這叫做Tan hack。
的* html
部分隱藏比IE 6和下面其它瀏覽器的規則。 IE 6顯然認爲html
元素有父項。
反斜槓(w\idth
)的規則被IE 5.0和5.5錯誤地解析爲Windows不適用,違反了section 4.1.3 of the CSS2 standard。
正確拼寫的width
規則在IE 6 Windows和IE 5 Mac中被覆蓋,它沒有特定的CSS解析錯誤。具有觸發標準模式下,W3C盒模型下的寬度的DOCTYPE(後來的CSS規則優先於前面的。)
因此,在一個頁面(IE 6的Windows和IE 5的Mac)進入下w\idth
,並且傳統(邊框)框模型(對於IE 5 Windows)的寬度低於width
。
除非您需要支持IE 5(已過時),否則這種攻擊是不必要的。
早期版本(不合規)在你的例子不明白用反斜槓的特性,因此會設置寬度爲91px。合規的瀏覽器會理解這兩行,但CSS的級聯性意味着第一個值被下一個值覆蓋,因此它們將寬度設置爲93px。
這種破解是一種克服IE中破碎的盒子模型的方式,其中元素尺寸的計算方式不同,造成佈局噩夢。
基本上,它的工作原理是IE的早期版本不知道如何忽略反斜槓。他們只是說「我不認識這個屬性」而忽略了整個界限。其他瀏覽器在尋找方法來理解它們給出的代碼方面有點聰明,例如,忽略反斜槓。
這給了我們一個方便(儘管不符合標準)的方式讓IE忽略一行CSS。所有瀏覽器都會讀取第一行,並將寬度設置爲91px。然後樣式表有點說:「嘿,如果你不是IE瀏覽器,你應該把你的寬度設置爲93px。」所以更聰明的瀏覽器會這樣做,給我們一種告訴IE我們需要的方式,而不會干擾所有其他瀏覽器的佈局。