史上最も完全なcss hackと呼ばれています
2097 ワード
<!DOCTYPE html>
<html>
<head>
<title>Css Hack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html> 上のコードは直接copyで出てきて、htmlに保存して各ブラウザで試してみてください.次に分析します.
background-color:blue; 各ブラウザはすべて知っていて、ここはfirefoxに使います;
background-color:red\9;\9すべてのieブラウザが認識できます.
background-color:yellow\0;\0はie 8に残されたが、筆者がテストしたところ、最新版operaも認識していることが分かった...しかし、ゆっくりして、後ろにはoperaに認めたhackが書いてあるので、0私たちはie 8に残したと思っています.
+background-color:pink; + ie 7が決まった.
_background-color:orange; _不思議なie 6に特化しています.
:root #test { background-color:purple\9; } :rootはie 9に与えられたもので、ネット上では
:root #test { background-color:purple\0;},ええ...これ...、新版operaも認識しているので、筆者が繰り返し検証した最終ie 9特有のものは、rootセレクタ{属性9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } これはいつもieと0を争う不思議なoperaで、0を追加しなければなりません.さもないとfirefox、chrome、safariも知っています.の
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最後にこれはブラウザの新貴chromeとsafariです.
はい、これだけです.以上の順序は変えられないことに特に注意してください.css hackはブラウザ間のcss表示の違いの問題を解決することができますが、結局W 3 Cの規範に合わないので、私たちは普段cssを書くのは標準に従ったほうがいいです.そうすれば、私たちの今後のメンテナンスにも大きなメリットがあります.本当に使えません.
別の点を記録します.
Firefox、Opera、Google、IE8、IE7，div = width + padding + border + margin。
IE6 ：DIV = width + margin