How Can I Use CSS Hacks to Target Only Internet Explorer 11?-CSS Tutorial-php.cn

How Can I Use CSS Hacks to Target Only Internet Explorer 11?

Linda Hamilton

Release： 2024-11-28 14:46:14

Original

753 people have browsed it

How Can I Use CSS Hacks to Target Only Internet Explorer 11?

Writing CSS Hacks Specifically for IE 11

To target IE 11 with CSS hacks, you can utilize Microsoft-specific CSS rules. The following combination filters for IE11:

@media all and (-ms-high-contrast:none) {
 .foo { color: green } /* IE10 */
 *::-ms-backdrop, .foo { color: red } /* IE11 */
}

Copy after login

This filter works because user agents that cannot parse the selector (i.e., it's not valid CSS 2.1) will ignore the selector and the following declaration block as well.

Example:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Copy after login

The above is the detailed content of How Can I Use CSS Hacks to Target Only Internet Explorer 11?. For more information, please follow other related articles on the PHP Chinese website!