Home >Web Front-end >CSS Tutorial >How Can I Use CSS Hacks to Target and Style Only Internet Explorer 11?
How Can I Use CSS Hacks to Target and Style Only Internet Explorer 11?
- Patricia ArquetteOriginal
- 2024-12-04 18:55:16317browse
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 }
}
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>
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!