How Can I Create a CSS Hack Specifically for Internet Explorer 11?-CSS Tutorial-php.cn

How Can I Create a CSS Hack Specifically for Internet Explorer 11?

Patricia Arquette

Release： 2024-12-08 15:26:10

Original

874 people have browsed it

How Can I Create a CSS Hack Specifically for Internet Explorer 11?

How to Create a CSS Hack Specifically for IE 11?

If you find yourself with a website that displays poorly on IE 11, you may need to employ CSS hacks to resolve the issue. Here's how:

CSS Selector for IE 11

To target IE 11 exclusively, use a combination of Microsoft-specific CSS rules, as seen below:

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

Copy after login

How CSS Hacks Work in IE

When a user agent, such as IE, encounters an invalid CSS selector, it ignores both the selector and the following declaration block. This behavior is exploited by CSS hacks to achieve browser-specific styling.

Example Code

The following code demonstrates how to target IE 10 and IE 11 specifically:

<!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 Create a CSS Hack Specifically for Internet Explorer 11?. For more information, please follow other related articles on the PHP Chinese website!