Question

我是条件CSS的新手。我的问题是，用它来处理跨浏览器问题是对的吗？

例如：

#header
{
    [if IE 7] width: 600px;
    [if Webkit] width:300px;    
}

编者注：OP最有可能使用此：http://www.conditional-css.com/

Answer 1

对实际的CSS文件（或类）使用条件语句，但在html上使用。

就像这样：

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

这是写在html文件上，而不是CSS文件！

您发布的格式我认为实际上并不起作用，我敢打赌它不会验证，所以它不是标准的。

Answer 2

在IE中使用这种技术的变体已经变得很普遍了，我相信它很受HTML5 Boilerplate [需要引证]的欢迎：

<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

现在您可以在主CSS文件中定位没有IE hacks 的元素，如下所示：

.ie6 .header li {
    /* some ie6 only styles here */
}

对我而言，这比使用单独的样式表更易于维护，但是其他浏览器读取（但不适用）IE样式时会受到轻微的挫折。

如果您遇到Webkit问题，您最有可能错误。不是绝对的，但可能非常。

编辑：许多浏览器允许使用专有扩展，允许您设置仅适用于该浏览器的规则。例如：

-moz-property {}
-webkit-property {}
-o-property {/* Opera */}

请注意，这并不意味着您可以应用任何 CSS属性，您必须查看可用的内容。

我可以快速找到的最佳参考：http://reference.sitepoint.com/css/vendorspecific

_{SO编辑，如果有更好的参考，请随时更换此链接}

Answer 3

关于你的陈述的有效性，jackJoe得到了一个很好的答案。但是，这通常不是好的做法。就布局而言，这是一个更好的主意，可以获得一个良好的布局，可以跨浏览器工作，而不是浏览器特定的布局问题。相反，担心特定于功能的问题。肯定有些时候你无法解决IE6问题，在这一点上你可能应该使用一些特定于浏览器的代码，这样你就不会让自己头痛。

总的来说，这只是一个好主意。

旁注：为什么以Tim Berners-Lee的名义你还在尝试支持IE5？

Answer 4

不，不是，你可以试试这些

对于IE 7＆amp; 8：
width: 600px\9;
对于IE10：
width:300px\0/;

适用于所有浏览器：
width: 600px;

但如果你想在所有三个浏览器上分别使用IE，GC，FF那么就像这样使用它 width:300px; width: 600px\9; width:300px\0/;
我认为这就是你要找的东西！

CSS if语句......是不是？

4 个答案: