簡單介紹CSS hack的使用

2024-07-11 08:29:43

字體：大中小

來源：轉載

供稿：網友

css hack 是個很有爭議的東西，一開始我也很討厭，因為我覺得可以饒過 css hack，通過另外的方法解決問題。但是，隨著工作中的不斷實踐，改變了我的觀點，css hack 雖然不能通過 w3c 標準認證，但適當是使用很有可能會使你的 HTML 結構更緊湊、有效的減少無語義標簽或帶來其他好處。

1.IE條件注釋法
該方法安全性好，但是不利于開發維護。比如涉及到針對不同版本IE的css。

只在IE下有效
 只在IE6有效
 只在IE6以上版本有效

注意：結合lte、lt、gte、gt、!關鍵字使用。

2.選擇符前綴法

“*html” 前綴只對IE6生效 "*+html"前綴只對IE7生效

CSS Code復制內容到剪貼板

.test{width:80px;} /*IE 6 7 8*/ *html .test{width:70px;} /*IE6*/
*+html .test{width:60px;}/*IE7*/

缺點：不能保證IE9，10不識別*html,*+html，有向后兼容風險。

3.樣式屬性前綴法：

如“_”只在IE6下生效，“*”在IE6和IE7下生效。同樣有向后兼容隱患。
.test{width:80px;*width:70px;_width:60px;}

可用于內聯樣式

CSS Code復制內容到剪貼板

：<div style="width:80px;*width:70px;_width:60px;"></div>

由于IE條件注釋法不利于開發維護，實際中常用的hack方法常常是后兩者。

小例子

html 代碼

XML/HTML Code復制內容到剪貼板

<body> <p>您的瀏覽器是</p>
</body>

css hack 代碼

CSS Code復制內容到剪貼板

p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;} p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */ p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]} /* for sa/ch */ p { background:url(llq.gif) 90px -50px no-repeat/9;} /* for ie */

上一篇：純CSS實現Tab切換標簽效果代碼

下一篇：CSS基于單張背景圖實現自適應寬度的圓角菜單效果代碼