この記事では、一般的なWebサイトのグレースタイルとIEとの互換性の実践を中心に紹介します。
ページレイアウト形式:
<body>
<div id="layout">
内容代码开始
</div>
</body>一般的なグレーイング スタイル:
#layout{
filter: gray !important;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
p,input,span,li,a,i,em{
filter: gray !important;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}ie9 以下と互換性があります:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
/**把IE=Edge改为IE=9，强制使用ie9**/
<meta http-equiv="X-UA-Compatible" content="IE=9" > 知らせ：
背景スタイルは本文で直接定義するのではなく、レイアウトで定義することをお勧めします。そうしないと、ie で背景をグレーに設定しても有効にならない可能性があります。