常見css hack有三種:1、條件hack,語法“<!–[if <條件關(guān)鍵字>? IE <版本號>?]>HTML代碼塊<![endif]–>”;2、屬性前綴hack,語法“selector{<hack>?屬性名:屬性值<hack>?;}”;3、選擇器前綴hack,語法“<hack> selector{ 樣式代碼 }”。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS hack 是通過在 CSS 樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號 (什么樣的瀏覽器識別什么樣的符號是有標準的,CSS hack 就是讓你記住這個標準),,以達到應用不同的 CSS 樣式的目的。
CSS hack 是因為現(xiàn)有瀏覽器對標準的解析不同,為了兼容各瀏覽器,所采用的一種補救方法.。為了兼容低版本瀏覽器器的 CSS 解析 BUG,不得不把代碼寫的很繞, 直接增加了維護成本。
CSS hack 是一種類似作弊的手段, 以欺騙瀏覽器的方式達到兼容的目的, 是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。
常用的css hack有三種:條件hack、屬性hack、選擇符hack
1、條件hack
語法:
<!--[if <keywords>? IE <version>?]> HTML代碼塊 <![endif]-->
取值:
<keywords>
if條件共包含6種選擇方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
- 是否:指定是否IE或IE某個版本。關(guān)鍵字:空
- 大于:選擇大于指定版本的IE版本。關(guān)鍵字:gt(greater than)
- 大于或等于:選擇大于或等于指定版本的IE版本。關(guān)鍵字:gte(greater than or equal)
- 小于:選擇小于指定版本的IE版本。關(guān)鍵字:lt(less than)
- 小于或等于:選擇小于或等于指定版本的IE版本。關(guān)鍵字:lte(less than or equal)
-
非指定版本:選擇除指定版本外的所有IE版本。關(guān)鍵字:!
如不想在非IE中看到某區(qū)域,可這樣寫:
<!--[if IE]> <p>你在非IE中將看不到我的身影</p> <![endif]-->
if條件6種選擇方式的使用示例
是否,示例代碼:
<!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
大于,示例代碼:
<!--[if gt IE 6]> <style> .test{color:red;} </style> <![endif]-->
大于或等于,示例代碼:
<!--[if gte IE 6]> <style> .test{color:red;} </style> <![endif]-->
小于,示例代碼:
<!--[if lt IE 7]> <style> .test{color:red;} </style> <![endif]-->
小于或等于,示例代碼:
<!--[if lte IE 7]> <style> .test{color:red;} </style> <![endif]-->
非指定版本,示例代碼:
<!--[if ! IE 7]> <style> .test{color:red;} </style> <![endif]-->
2、屬性前綴hack
語法:selector{<hack>?property:value<hack>?;}
取值:
-
_:選擇IE6及以下。連接線(中劃線)(-)亦可使用,為了避免與某些帶中劃線的屬性混淆,所以使用下劃線(_)更為合適。
-
*:選擇IE7及以下。諸如:(+)與(#)之類的均可使用,不過業(yè)界對(*)的認知度更高
-
9:選擇IE6+
-