Question

不确定是否可能，但只是想知道在CSS中是否有区分两种浏览器，即IE6和IE8，因为我有一个我需要应用的样式，但IE6和IE8的值需要不同，即

ul.sf-menu li li.sfHover ul {
   left:            14.3em; /* for IE8 */
   left:            15em;   /* for IE6 */
   top:             0;

}

当IE8正在使用时是否有使用IE8左侧样式，反之亦然？

感谢。

Answer 1

您可以使用不同的css文件，如下所示：

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

将所有IE6“hacks”放在一个文件中。当一天到来时，IE6已经不复存在了（多么美好的一天！），你可以删除链接。它非常整洁，而不是在一个CSS文件中。

Answer 2

对build classes into the the html start tag使用条件评论：

<!Doctype html>
<!--[if IE 6]>
    <html lang="de-DE" class='ie ie6 lte6 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 7]>
    <html lang="de-DE" class='ie ie7 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 8]>
    <html lang="de-DE" class='ie ie8 lte8 lte9'>
<![endif]-->
<!--[if IE 9]>
    <html lang="de-DE" class='ie ie9 lte9'>
<![endif]-->
<!--[if !IE]><!-->
    <html lang="de-DE">
<!--<![endif]-->

请注意：{4}的HTML 4中不允许使用class属性，因此请使用 HTML5 和<html>。

现在，您可以在样式表中使用这些类：

<!Doctype html>

Answer 3

如果你绝对来区分IE版本，你可以使用“条件评论”。这是IE特有的功能，如下所示：

<!--[ie IE 6]>
    ....everything here will only be seen by IE6
<![endif]-->

在此示例中，所有其他浏览器只是将其视为HTML注释并忽略它。还有一个变体允许其他浏览器查看它，这意味着您也可以将它用于您明确希望仅从特定IE版本中排除的内容。

请注意，条件注释用于HTML文档，而不是样式表，因此您需要在HTML中嵌入样式，或者为不同的浏览器设置单独的样式表。

此链接为Microsoft's official information about Conditional Comments。
此链接为slightly easier to understand tutorial on Quirksmode。

如果您正在编写IE6，它有一种不可避免的习惯，但总的来说，我希望尽可能避免使用特定于浏览器的代码。

最好使用feature detection - 换句话说，您的代码会查找您要支持的特定功能，并根据浏览器上是否提供该功能做出相应的反应。这意味着您可以应对意外情况，例如用户使用您从未听说过的浏览器等等。

考虑到这一点，我建议使用Modernizr，根据可用功能为您的网站加载CSS类，然后您可以使用它来帮助您决定如何在任何给定的浏览器上展示您的网站

Answer 4

您可以添加一个仅覆盖值的IE6样式表。

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

Answer 5

在CSS中绝对没有办法做到这一点因为应该在CSS中完全没有必要 - 浏览器应该等效地应用样式并且内容不应该关注用户对浏览器的选择。

尽管如此，出于实际考虑，您必须使用CSS hacks，conditional comments或progressive enhancement技术。

Answer 6

我使用CSS Browser Selector这是一个jQuery插件，可以读取CSS表中的指定规则，因此不需要条件注释或hacky解决方法。

Answer 7

您可以使用http://rafael.adm.br/css_browser_selector/浏览器选择器，这是一个很棒的JavaScript解决方案。

基于浏览器的CSS差异化

7 个答案: