CSS技巧:important和空格的組合技巧及其他

來源:互聯網
上載者:User
css|技巧

!important和(空格)/**/:的組合技巧及其他

先溫習一下對於IE的box-model的破解
IE box-model這個臭名昭著的bug存在於IE6/Win以前的每一隻版本,這個蟲子直到tantak發布了流傳最為廣泛的那個hack才開始被馴服。

http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5.X/win對box-model的解析是一樣的,他們認為width包括了邊框(border)和補白(padding),幸運的是這個情況在IE6中有了好轉。

但是IE6在向後相容的同時也包容了以前的錯誤,IE6其實有兩個核心,在舊的頁面前他仍舊錶現出對錯誤的寬容,只有在文檔中嚴格地加上文件類型(DOCTYPE)聲明,IE6才能夠接受正確的box-model。

所以,tantak的hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作

div.content {
width:400px; //這個是錯誤的width,所有瀏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""後的內容
voice-family:inherit;
width:300px; //包括IE6/win在內的部分瀏覽器讀到這句,新的數值(300px)覆蓋掉了舊的
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句
}

現在回到主題,我們經常看到!important和(空格)/**/:組合在一起使用,這個寫法有什麼奧妙呢?

看剛才那個寫法,我這裡可以提供另一種寫法也能達到這樣的效果

div.content {
width:300px !important; //這個是正確的width,大部分支援!important標記的瀏覽器使用這裡的數值
width(空格)/**/:400px; //IE6/win不解析這句,所以IE6/win仍然認為width的值是300px;而IE5.X/win讀到這句,新的數值(400px)覆蓋掉了舊的,因為!important標記對他們不起作用
}
html>body .content { //html>body是CSS2的寫法
width:300px; //支援CSS2該寫法的瀏覽器有幸讀到了這一句
}

同樣,這個方法仍必須依靠正確的文件類型聲明才能夠正常工作,原因在前面已經說過。

文件類型聲明就像一個開關,開啟向後相容的未來,而錯誤使用的話,就是一個Pandora box。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。