CSS筆記:簡單瀏覽器兼容判斷所使用的CSS語法
老是會忘記一些css判斷語法,自己記下來!
#test
{
width: 100px; 給Firefox以及其他瀏覽器看
#width: 100px; 給IE7(或者更高)看
_width: 100px ; 給IE6以及更老的版本看
}
-------------------------------------
另外
#test{ color: #333; } /* Moz */
* html #test { color: #666; } /* IE6 */
*+html #test{ color: #999; } /* IE7 */
-------------------------------------
/* 這段代碼只有IE/Win可以看見 \*/
CSS 規則
/* 結束Hack */
上面的代碼中有兩行註釋,其中第一行結束時出現了反斜槓(\),在Mac的Internet Explorer中會認為註釋並沒有結束,於是繼續向下直到第一個完事的「*/」出現,這中間的所有字符都被當作是註釋,而IE/Win卻也只會把第一行 和第三行看作是註釋,中間的為有效代碼。所以這樣就區分出來了不同平台上的IE了。
-------------------------------------
#test
{
width: 100px; 給Firefox以及其他瀏覽器看
#width: 100px; 給IE7(或者更高)看
_width: 100px ; 給IE6以及更老的版本看
}
-------------------------------------
另外
#test{ color: #333; } /* Moz */
* html #test { color: #666; } /* IE6 */
*+html #test{ color: #999; } /* IE7 */
-------------------------------------
/* 這段代碼只有IE/Win可以看見 \*/
CSS 規則
/* 結束Hack */
上面的代碼中有兩行註釋,其中第一行結束時出現了反斜槓(\),在Mac的Internet Explorer中會認為註釋並沒有結束,於是繼續向下直到第一個完事的「*/」出現,這中間的所有字符都被當作是註釋,而IE/Win卻也只會把第一行 和第三行看作是註釋,中間的為有效代碼。所以這樣就區分出來了不同平台上的IE了。
-------------------------------------
for All browsers
#header {margin-bottom: 3em;}
for non-IE
html>body #header {margin-bottom: 1em;}
because the later CSS will take precedence to the previous one.
This together result in CSS in the first line is for IE, second line is for others.
留言