CSS 在样式表中使用 IE 条件注释
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11703684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using IE conditional comments inside a stylesheet
提问by Dexter Schneider
I know that you can use an IE conditional comment inside HTML:
我知道您可以在 HTML 中使用 IE 条件注释：
<!--[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...
但是，如果我只想在样式表中针对 IE，为 html 中的特定元素设置 css 规则，该怎么办。例如，您可以在 css 文件中使用此 Chrome/Safari hack作为 css 代码...
@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:
但是在 CSS 样式表中使用 IE hack，如下所示：
<!--[if IE]>
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
<![endif]-->
does not work. What do I use inside a stylesheetto target IE only?
不起作用。我在样式表中使用什么来仅针对 IE？
采纳答案by Derek Hunziker
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.
条件注释在样式表中不起作用。相反，您可以在 HTML 中使用条件注释将不同的 CSS 类或 ID 应用于您可以使用 CSS 定位的元素。
For instance:
例如：
<!--[if IE]>
<div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="wrapper">
<![endif]-->
Also, there are tools such as Modernizrthat 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.
此外，还有一些工具，例如Modernizr，它们以非常相似的方式进行特征检测（通过向<html>元素添加类）。您可以使用它逐步增强新浏览器的设计/脚本，同时仍然支持旧浏览器。
回答by Yannis Dran
It can be easier than what Derek Hunziker said:
这可能比 Derek Hunziker 所说的要容易：
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:
然后你可以很容易地定位它，例如，如果你想定位 IE 8 和更低的你写：
.lt-ie9 body{css rule here;}
and you are done!
你就完成了！
Cheers
干杯
回答by RWC
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.
条件注释在 Internet Explorer 9 及更低版本中有效，但被 Internet Explorer 10 及更高版本忽略。您可以在样式表中使用 Internet Explorer 特定的 CSS 规则。黑客？是的，但不是真的脏黑客恕我直言。
To target Internet Explorer 8, 9, 10 and 11, you can use:
要针对 Internet Explorer 8、9、10 和 11，您可以使用：
@media screen\0 {…}
@媒体屏幕\0 {…}
To target Internet Explorer 6 and 7, you can use:
要针对 Internet Explorer 6 和 7，您可以使用：
@media screen\9 {…}
@媒体屏幕\9 {…}
Source: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
来源：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--- Nothing to see here. Only CSS rules ---
, @media screen {
span.icon {
margin-right: 8px;
}
}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<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>
, @media screen {
/* 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;
}A complete example:
一个完整的例子：
.Class {
color: green; /* standard */
color: green; /* IE 8 and below */
*color: green; /* IE 7 and below */
color: green !ie; /* IE 7 and below */
_color: green; /* IE 6 */
}
回答by John Conde
You can't use IE conditional comments but you can use hacks. This page of CSS hacksexplains IE hacks you can use (and more).
您不能使用 IE 条件注释，但可以使用 hacks。这个 CSS hacks 页面解释了您可以使用的 IE hacks（以及更多）。
回答by pcunite
IE stylesheet hacks
IE 样式表黑客
##代码##回答by Zachary Kniebel
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.
您想要做的是像通常在任何其他浏览器中一样设置样式表中的所有内容。将普通样式表导入页面后，您将使用常规<!--[if IE]>条件语句导入特定于 IE 的样式表。
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.
按照此方法导入所有浏览器的样式，然后使用您的 IE 特定样式覆盖那些不兼容、无法正确呈现或需要调整以在 IE 中使用的样式。
