logo标签列表

在样式表中使用IE条件注释

cssconditional-comments
34

我知道在HTML中可以使用IE条件注释：

<!--[if IE]>
  <link href="ieOnlyStylesheet.css" />
<![endif]-->

但是如果我想在 样式表 中只针对 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);
    }
}

但是在CSS样式表中使用IE hack，像这样：

 <!--[if IE]>
      .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
 <![endif]-->

不起作用。我应该在样式表中使用什么来仅针对IE进行目标设置？

2
条件注释是1）不是黑客技术 2）仅适用于HTML，而非CSS。 - BoltClock
条件注释在Internet Explorer 9及以下版本中有效，但在Internet Explorer 10及以上版本中被忽略。您可以在样式表中使用Internet Explorer特定的CSS规则。请参见下面的答案。 - RWC
6个回答
27

条件注释不能在样式表中使用。相反，您可以在HTML中使用条件注释，将不同的CSS类或ID应用于元素，并可通过CSS来定位这些元素。

例如：

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->
另外，还有像Modernizr这样的工具，可以以非常相似的方式（通过向<html>元素添加类）进行功能检测。你可以使用它来逐步增强你的设计/脚本以支持新版浏览器，同时仍然支持旧版浏览器。
谢谢，您的代码很容易理解并且可以用于实现我想要达到的目标。 - Dexter Schneider
现代浏览器是如何自动化的？请解释一下，因为我只知道Modernizr“检测”。 - Yannis Dran
1
@YannisDran，你是对的，它不能自动添加IE类，但是它可以进行特性检测，然后您可以通过CSS以类似的方式进行定位。我已经更新了答案，使其更加清晰明了。 - Derek Hunziker
2
它不支持IE > 9和EDGE，因为微软不再支持条件注释 https://msdn.microsoft.com/zh-cn/library/hh801214(v=vs.85).aspx - Muflix
Muflix所说的是，你可以在样式表中使用Internet Explorer特定的CSS规则。请参见我下面的回答。 - RWC
19

这可能比Derek Hunziker说的要简单：

只需按原样包含此代码：

<!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>

那么您可以轻松地对其进行定位，例如如果您想针对IE 8及更低版本进行定位，则编写：

.lt-ie9 body{css rule here;}

完成啦！

干杯！

条件注释适用于Internet Explorer 9及以下版本，但被Internet Explorer 10（及更高版本）忽略。您可以在样式表中使用Internet Explorer特定的CSS规则。请参见我下面的答案。 - RWC
8

条件注释在Internet Explorer 9及以下版本中有效，但在Internet Explorer 10及以上版本中被忽略。你可以在样式表中使用Internet Explorer特定的CSS规则。是hack？是的，但我认为并不算很脏的hack。

要针对Internet Explorer 8、9、10和11进行目标设定，可以使用:

@media screen\0 {…}

要针对Internet Explorer 6和7进行目标设定，可以使用:

@media screen\9 {…}

来源: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

这对我很有用。我还没有时间在不同的浏览器中测试它。如果你可以确认它是否有效，请添加一些评论（包括你测试的浏览器）。

示例：

/* 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 ---

一个完整的示例： 

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>&nbsp;</td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>            
    </table>

1
谢谢！我开始拔头发了:D - leppie
4

您不能使用IE条件注释，但可以使用hack。 这个CSS hack页面解释了您可以使用的IE hack（以及更多内容）。

谢谢，这有点回答了我的问题（顺便说一下，我之前看过这篇文章，在发布到 Stack 上之前我通常会做一些研究），但它只有一个针对 IE 7 及以下版本的 in-CSS 解决方案，即： IE 6 及以下版本 * html {} IE 7 及以下版本 *:first-child+html {} * html {} 仅限 IE 7 *:first-child+html {} 我想要一种针对所有 IE 浏览器的 in-CSS hack 方法，但似乎不可能。 - Dexter Schneider
条件注释在Internet Explorer 9及以下版本中可用，但在Internet Explorer 10（以及更高版本）中将被忽略。您可以在样式表中使用Internet Explorer特定的CSS规则。请参见下面的回答。 - RWC
1

IE 样式表 hack

.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 */
}
17
请不要使用上述的“hack”技巧。这些信息容易引导你陷入更多问题而非解决它们。例如，“\9”技巧并不能只针对IE 8及以下版本生效，它会影响到IE 7、8、9以及10。请务必不要使用这些技巧。 - Sampson
0

你想要做的是在样式表中像对待其他浏览器一样对所有元素进行样式设置。在将普通样式表导入页面后，你需要使用常规的<!--[if IE]>条件语句导入一个专门针对IE的样式表。

按照这种方法，可以导入适用于所有浏览器的样式，并使用IE特定的样式来覆盖那些不兼容、无法正确渲染或需要在IE中进行调整的样式。

1
IE 10及以上版本完全不支持条件注释。 - RWC
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接