This article mainly introduces the general website gray style and the practice of compatibility with IE.
Page layout format:
<body>
<div id="layout">
内容代码开始
</div>
</body>
General graying style:
#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%);
}
Compatible with ie9 and below:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
/**把IE=Edge改为IE=9,强制使用ie9**/
<meta http-equiv="X-UA-Compatible" content="IE=9" >
Notice:
It is recommended that the background style be defined in the layout, not directly on the body, otherwise under ie, setting the background to gray may not take effect.