【问题标题】:Do double forward slashes direct IE to use specific css?双正斜杠是否指示 IE 使用特定的 css?
【发布时间】:2012-06-28 10:45:29
【问题描述】:

我刚刚在开发网站时发现了一些非常奇怪的东西。在尝试让 div 元素显示在屏幕顶部时,我注意到除了旧版本的 IE 之外,我在任何浏览器中都没有达到预期的效果。为了测试一些不同的代码,我没有删除错误的行,而是使用“//”将其注释掉(我什至不确定这是否适用于 css)但发生的事情是,兼容的浏览器使用了未注释的代码,而IE使用'//'标记的代码。这是代码:

#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block;       //    browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}

所以基本上,似乎 // 可以用来指示较新的浏览器忽略特定的代码行,并指示旧版本的 IE 使用它?如果这是常见的做法,请告诉我。它确实让旧浏览器的开发变得容易得多

【问题讨论】:

    标签: css internet-explorer browser comments compatibility


    【解决方案1】:

    // 不是valid CSS comment

    正确解析 CSS 的浏览器将忽略 //position,因为 //position 不是有效的属性名称(详细信息为 hereproperty -> IDENT S* -> follow it through)。

    这仅适用于 IE7,因为它众所周知的错误是接受带有垃圾的属性。

    不仅仅是// 有效。 IE7这里会有红色文字:

    body {
        !/!*//color: red;
    }
    

    这通常与* 一起被利用,例如*display: inline; 作为display: inline-block workaround for IE7 的一部分。

    【讨论】:

    • (我假设“旧版本的 IE”是指 IE7)
    • 我发现在我的 css 周围添加 /* .. */ 很麻烦,因为我正在调试它,所以我提供了以下俗气的 hack 来以跨浏览器的方式禁用 css 行:. myRule{..} 变为 .XXmyRule{..}!当然它添加了一个额外的未使用规则,而不是删除它,但肯定比 /* .. */ 快很多
    • 我一直在使用同样的技巧——在 CSS 以外的地方——例如。检查变量是否在任何地方使用 - 将 var FileLineIndex : integer ; 更改为 var xFileLineIndex : integer ;
    【解决方案2】:

    不要陷入注释掉单行或块而不使用正确的 /* */ 对的诱惑。有权访问网站文件夹的客户只是自己选择使用以下命令注释掉一行:

    //*  comment here   *//
    

    实际上,Chrome 和 Safari 将忽略此行之后的任何内容。我称之为“css杀手”。 :D

    【讨论】:

    • 我不知道会怎样。它会看到// 并在EOL 之前忽略所有内容,或者它会看到/,然后将/* comment here */ 视为“零长度空间”,然后再看到另一个/。无效的 CSS,当然,但为什么解析器会吞下所有东西直到 EOF?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-01-21
    • 1970-01-01
    • 1970-01-01
    • 2014-04-13
    • 2017-08-14
    • 2013-11-14
    相关资源
    最近更新 更多