如何設定CSS只適用於IE使用
IE真的很煩，往往不同的版本CSS的效果都不太一樣，這次遇到是IE7以前的不合用
所以為了要向下相容，所以必須針對IE6 IE7 進行特別的CSS stylesheet的設定
印象中以前就看過，所以沒有花很久的時間就找到需要的資訊，試用一下~合用的呢~^^
這文章裡面有蠻多為了IE相容而彈性的參數設定，寫下來給自己以後參考一下:
只給IE瀏覽器使用
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>
只不給IE瀏覽器使用
<!–[if !IE]><!–>
<link rel=“stylesheet” type=“text/css” href=“not-ie.css” />
<!–<![endif]–>
<link rel=“stylesheet” type=“text/css” href=“not-ie.css” />
<!–<![endif]–>
只給IE 7瀏覽器使用
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css”>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”ie7.css”>
<![endif]–>
只給IE 6瀏覽器使用
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>
只給IE 5瀏覽器使用
<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”ie5.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”ie5.css” />
<![endif]–>
只給IE 5.5瀏覽器使用
<!–[if IE 5.5000]>
<link rel=”stylesheet” type=”text/css” href=”ie55.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”ie55.css” />
<![endif]–>
只給IE 7以下的瀏覽器使用
<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />
<![endif]–>
把lte ->lt 就變成IE7 前的版本適用(不含IE7) ，反之如果要IE7以上的就改成 gte 即可
上述是整個CSS檔案去判斷要不要使用，而我們也可以在CSS檔裡針對各stylesheet 去限定只適用於哪個IE瀏覽器版本
限IE6瀏覽器使用
* html #div {
height: 300px;
}
height: 300px;
}
限IE7瀏覽器使用
*+html #div {
height: 300px;
}
height: 300px;
}
限IE8瀏覽器使用
#div {
height: 300px \0/;
}
height: 300px \0/;
}
限IE7 & IE8瀏覽器使用
#div {
height: 300px\9;
}
height: 300px\9;
}
IE7瀏覽器不能使用
#div {
_height: 300px;
}
_height: 300px;
}
IE6瀏覽器以下不能使用
#div {
height/**/:300px;
height/**/:300px;
html > body
#div {
height:300px;
}
#div {
height:300px;
}
結尾…..
為啥微軟不好好走正確的路線呢~~有時間加上這些相容的參數，卻不安份的走歪路~真討厭
參考資料:http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
近期留言