主流瀏覽器兼容性問題---專屬CSS hack

-----歡迎你們指正錯誤，深表感謝

CSS hack：因爲不一樣的瀏覽器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。簡而言之，瀏覽器不一樣於W3C關於CSS標準的解析就是CSS hack。

通常談到CSS hack，最早想到的就是ie6。ie6很頭疼，曾經是輝煌，現在是夕陽西下了，被進步理論和思想淘汰是遲早的事情，目前想作的就是盡最大的可能去向下兼容它。這篇博文須要說的是：主流瀏覽器之專屬CSS hack。

下面從ie開始說吧：

ie6（_）：

/*ie 6*/
_width:100px;
/* 給單獨ie 6的解析值，在屬性前加下劃線「_」 */

 

ie6 & ie7（*）：

/*ie 6 和ie 7*/
*width:100px; /* 給單獨ie6 和 ie 7的解析值，在屬性前加星號「*」 */

 

ie7（*+）：

/*ie 7*/
*+width:100px; /* 給單獨ie 7的解析值，在屬性前加星號和加號「*+」 */

 

ie8(\0)：

/*ie 8*/
width:100px\0;
/* 給單獨ie 8的解析值，在屬性值後加「\0」 */

 

ie9（\9\0）：

/*ie 9*/
width:100px\9\0;
/* 給單獨ie 9的解析值，在屬性值後加「\9\0」 */

 

全部ie（\9）：

/*ie*/
width:100px\9;
/* 給全部ie的解析值，在屬性值後加「\9」 */

 

firefox：

/* 低版本火狐1,2 */
body:empty #firefox12/*選擇器前加 body:empty*/ {width: 100px;} /* 高版本火狐*/ @-moz-document url-prefix()/* 選擇器前加 @-moz-document url-prefix() */ { #firefox { width:100px; } }

 

safari：

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
/* 選擇器前加 @media screen and (-webkit-min-device-pixel-ratio:0) */ {#safari { display: block; }}

 

opera：

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
/*選擇器前加 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)*/ {head~body #opera { display: block; }}

 

CSS Hack 雖好且方便兼容各瀏覽器，可是通不過 W3C 驗證，因此還得本身權衡是否有必要去使用。