以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
作者:admin 時間:2022-5-6 11:39:14 瀏覽:最近做一個項目，需要用CSS識別各種主流瀏覽器，Chrome、Firefox、IE11，因為以前寫過類似的代碼，以為很快搞定，但是把代碼復制過來之后發現，那些代碼現在已經失效了。
經過測試，發現現在有了新的CSS識別Chrome、Firefox、IE11瀏覽器的代碼，至少到目前為止，這些代碼還能用。
實例
下面是一個完整實例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
background:#ccc;
}
div{
color:blue;
}
/* firefox */
@-moz-document url-prefix(){
div{
color:red;
}
}
/* IE11+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div{
color:yellow;
}
}
</style>
</head>
<body>
<div>
卡卡網 www.organiccannabisseed.com
</div>
</body>
</html>
執行結果
Chrome
Firefox
IE11
執行結果符合預期。
代碼解釋
在編寫代碼的時候，主體代碼用Chrome調試，另外編寫Firefox和IE11的代碼。因此CSS只需識別Firefox和IE11瀏覽器即可。
識別Firefox的代碼是
@-moz-document url-prefix(){}識別IE11的代碼是
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}識別Chrome和Firefox
另外測試發現，下面的代碼可以識別Chrome和Firefox，而IE11不會執行里面的代碼。
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}總結
本文介紹了現在新的CSS識別Chrome、Firefox、IE11瀏覽器的代碼，因為瀏覽器不斷更新，這些代碼可能過一段時間也會無效。所以我們在編寫代碼時，需要進行各種瀏覽器的兼容性測試。
參考文章
標簽: css Chrome Firefox IE11 CSS識別瀏覽器代碼
相關文章
- IT熱文
- 站長推薦
