【问题标题】:CSS Differentiation based on Browsers基于浏览器的 CSS 差异化
【发布时间】:2010-09-29 21:40:11
【问题描述】:

不确定是否可能,但只是想知道 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 左侧样式,反之亦然?

谢谢。

【问题讨论】:

  • ul.sf-menu li li.sfHover ul 是不是很丑? :S

标签: css internet-explorer-8 internet-explorer-6


【解决方案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 文件中。

【讨论】:

    【解决方案2】:

    使用条件 cmets 到 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]-->
    

    注意:&lt;html&gt; 不允许在 HTML 4 中使用 class 属性,因此请使用 HTML5&lt;!Doctype html&gt;

    现在,您可以在样式表中使用这些类:

    .ie8
    {
        top:        10px;
    }
    .lte7
    {
        top:        15px;
    }
    

    【讨论】:

    • 我自己使用了一种非常相似的技术。它让生活变得如此轻松。
    • 这类似于 Modernizr 使用的技术 - 即它向文档添加类,让您知道支持哪些功能。我建议 Modernizr 更好,因为它可以处理所有浏览器及其支持的功能,而不仅仅是各种 IE 版本。
    • Modernizr 不能在没有 Javascript 的情况下工作,所以无论如何你都需要一个后备。对于其他浏览器,我很少需要复杂的黑客攻击。 :)
    【解决方案3】:

    如果你绝对区分IE版本,你可以使用“条件注释”。这是 IE 特有的功能,如下所示:

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

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

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

    如果您正在为 IE6 编写代码,它有一个不可避免的习惯,但总的来说,我更愿意尽可能避免使用特定于浏览器的代码。

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

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

    【讨论】:

      【解决方案4】:

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

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

      【讨论】:

        【解决方案5】:

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

        也就是说,出于实际考虑,您必须使用CSS hacksconditional commentsprogressive enhancement 技术。

        【讨论】:

          【解决方案6】:

          我使用CSS Browser Selector,这是一个 jQuery 插件,可以读取 CSS 表中的指定规则,因此不需要条件 cmets 或 hacky 变通办法。

          【讨论】:

            【解决方案7】:

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

            【讨论】:

              猜你喜欢
              • 2014-04-12
              • 2018-07-16
              • 2012-05-09
              • 1970-01-01
              • 2019-11-29
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多