General website graying-compatible with IE

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.

Guess you like

Origin blog.csdn.net/pinhmin/article/details/129009178