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

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

Patricia Arquette

Release： 2024-12-04 18:55:16

Original

271 people have browsed it

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

CSS Hacks for IE 11

To address rendering issues faced in IE 11, it's necessary to utilize CSS filters that only this browser can parse.

Microsoft-Specific CSS Rules

Use a combination of Microsoft-specific CSS rules to target IE11:

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

Copy after login

Key Principle

These filters work because:

If a user agent (browser) cannot understand the selector (since it's not valid CSS 2.1), it must ignore both the selector and the subsequent declaration block.

Example

Consider the following HTML and CSS code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <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

In IE11, the *::-ms-backdrop selector is recognized and the text "Hi There!!!" will appear in red. In non-IE browsers, they will simply ignore these rules.

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