问题
I know that you can use an IE conditional comment inside HTML:
<!--[if IE]>
<link href="ieOnlyStylesheet.css" />
<![endif]-->
But what if I want to target only IE in a stylesheet, setting up a css rule for a specific element inside the html. For example, you can use this Chrome/Safari hack inside the css file as css code...
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
}
But using the IE hack inside the CSS stylesheet like this:
<!--[if IE]>
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
<![endif]-->
does not work. What do I use inside a stylesheet to target IE only?
回答1:
Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.
For instance:
<!--[if IE]>
<div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="wrapper">
<![endif]-->
Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.
回答2:
It can be easier than what Derek Hunziker said:
Simply include this code as it is:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
Then you can target it easily, for example if you want to target IE 8 and lower you write:
.lt-ie9 body{css rule here;}
and you are done!
Cheers
回答3:
Conditional comments work in Internet Explorer 9 and below, but are ignored by Internet Explorer 10 and up. You can use Internet Explorer specific CSS rules in your stylesheet. Hacks? Yeah, but not really dirty hacks imho.
To target Internet Explorer 8, 9, 10 and 11, you can use:
@media screen\0 {…}
To target Internet Explorer 6 and 7, you can use:
@media screen\9 {…}
Source: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
It worked for me. I have not had time to test it in different browsers. If you can confirm it works (or not), please add some comments (with the browser you tested it in.)
Example:
/* Default CSS rule for all browsers */
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */
@media screen\0, @media screen\9 {
span.icon {
margin-right: 8px;
}
}--- Nothing to see here. Only CSS rules ---A complete example:
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */
@media screen\0, @media screen\9 {
/* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */
span.icon {
margin-right: 8px;
}
}
/* -----------------------------------------------------------------------------*/
a.icon {
-webkit-padding-start: 1.5em;
text-decoration: none;
}
a.icon:hover {
text-decoration: underline;
}
span.icon_file {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}
span.icon_dir {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}
span.icon_up {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
}
.nowrap {
white-space: nowrap ;
}
div.fileList {
padding: 20px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table.FileList {
border-collapse: collapse;
margin: 20px;
}
table.FileList th {
text-align: left;
font-weight: bold;
}
table.FileList td {
border: 0px solid #000;
}
table.FileList tr.heading{
border-bottom: 1px solid black;
}<table class="FileList">
<tr class="heading"><th>Archive</th></tr>
<tr><td> </td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>
</table>回答4:
You can't use IE conditional comments but you can use hacks. This page of CSS hacks explains IE hacks you can use (and more).
回答5:
IE stylesheet hacks
.Class {
color: green; /* standard */
color: green\9; /* IE 8 and below */
*color: green; /* IE 7 and below */
color: green !ie; /* IE 7 and below */
_color: green; /* IE 6 */
}
回答6:
What you want to do is style everything in your stylesheet as you normally would for any other browser. AFTER you import the normal stylesheet into your page you will then import an IE-specific stylesheet with the regular <!--[if IE]> conditional statement.
Following this method imports the styles for all browsers and then uses your IE-specific styles to override those that are not compatible, don't render correctly, or need to be adjusted for use in IE.
来源：https://stackoverflow.com/questions/11703684/using-ie-conditional-comments-inside-a-stylesheet