How Can I Style Only Internet Explorer (All Versions) Using CSS Alone?

Styling Only Internet Explorer (All Versions) via CSS

Problem:

Within an inherited project, there's a need to specifically target Internet Explorer for styling without modifying HTML, using CSS exclusively.

Solution:

Internet Explorer 9 and Lower:

• Utilize conditional comments to load an external stylesheet tailored for IE.

<!--\[if IE]--\>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<!\[endif]--\>

Internet Explorer 10 and 11:

• Create a media query employing "-ms-high-contrast" to apply CSS styles exclusive to IE 10 :

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
}

Microsoft Edge 12:

• Leverage "@supports" rule to target IE Edge 12 and later:

@supports (-ms-accelerator:true) {
    /* IE Edge 12+ CSS styles go here */ 
}

Inline Rule for IE8 and Below:

/* For IE css hack */
margin-top: 10px /* apply to all ie from 8 and below */
*margin-top:10px;  /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */

Note: For inline stylesheets, consider using media queries and conditional comments for versions below IE9.

The above is the detailed content of How Can I Style Only Internet Explorer (All Versions) Using CSS Alone?. For more information, please follow other related articles on the PHP Chinese website!