0

我的应用程序中有以下 css 代码，我需要在不使用导入的情况下重写它。

我知道它首先检查 IE 是否是版本 6，如果是，它会导入某些 CSS（如果不只是空字符串）。

这里真的需要导入吗？我猜如果我只是在所有 css 文件的末尾写这个，这将获得优先权。

@import "javascript:(/msie 6/gi.test(navigator.userAgent)) ? 'table.menu tr.highlight td.icon img { filter: none !important; margin-left: 1px !important; margin-right: 3px !important; margin-top: 1px !important; margin-bottom: 3px !important;)' : ''";
4

3 回答 3

6

就我个人而言，我会将 IE6 样式放在单独的样式表中，并在我的 HTML 头部使用条件注释来包含它：

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

该技术在这里得到了很好的解释：http: //css-tricks.com/how-to-create-an-ie-only-stylesheet/

您会注意到，这种技术也适用于大多数其他版本的 IE。我更喜欢这种技术，而不是 @Milkywayspatterns 描述的内联黑客，因为它使您的代码更干净、更易读且更易于维护。它还可以防止仅 IE 的 css 被真实的浏览器加载。他们将忽略代码（他们应该如此，毕竟它们是注释）并且只有 IE 用户必须等待额外的字节加载......

而且我并不羡慕你仍然必须支持 IE6！

于 2013-08-02T14:57:18.987 回答
1

在元素中使用条件注释head而不是在 CSS 中导入。这将仅隔离到 IE 6：

<!--[if IE 6]>
    <style type="text/css">
        table.menu tr.highlight td.icon img { 
            filter: none !important; 
            margin-left: 1px !important; 
            margin-right: 3px !important;
            margin-top: 1px !important; 
            margin-bottom: 3px !important;
        }
    </style>
<![endif]-->

然而，在这种情况下，最好创建一个专用的 IE6 样式表并将其添加进去。任何一种方式都可以。

于 2013-08-02T14:55:15.573 回答
1

在您的 .css 文件中，您只能通过在声明前添加 ( * html ) 来“破解” ie6 范围。

仅限 IE-6

* html .selector { 
    /* this will apply to ie6 only */
}

您也可以使用下划线 hack，但这会导致您的 CSS 文件出现验证错误。作为参考，这里有一个例子：

.selector {
    margin:0;
    _margin-left:5px; /* only IE6 */
}

所以你可以试试：

* html table.menu tr.highlight td.icon img {
    filter: none !important;
    margin-left: 1px !important;
    margin-right: 3px !important;
    margin-top: 1px !important;
    margin-bottom: 3px !important;
}

如果你需要更多关于 .css hacks 来定位 IE 的信息，你可以在这里阅读一些例子。

IE-6 ONLY
* html #div { 
    height: 300px;
}

IE-7 ONLY
*+html #div { 
    height: 300px;
}

IE-8 ONLY
#div {
  height: 300px\0/;
}

IE-7 & IE-8
#div {
  height: 300px\9;
}

NON IE-7 ONLY:
#div {
   _height: 300px;
}

Hide from IE 6 and LOWER:
#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

如果您想用条件技术“替换”@import，那么用户PeterVR的答案更重要的是在 html 文档的标题部分使用 Microsoft 条件注释。

于 2013-08-02T15:00:05.157 回答