Home >Web Front-end >CSS Tutorial >How Can I Create a CSS Hack Specifically for Internet Explorer 11?
How Can I Create a CSS Hack Specifically for Internet Explorer 11?
- Patricia ArquetteOriginal
- 2024-12-08 15:26:10874browse
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 */
}
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>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!