双正斜杠是不是指示 IE 使用特定的 css？

Posted 2023-02-21

【中文标题】双正斜杠是不是指示 IE 使用特定的 css？

【英文标题】：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 使用它？如果这是常见的做法，请让我知道。它确实让旧浏览器的开发变得容易得多

【参考方案1】：

// 不是valid CSS comment。

正确解析 CSS 的浏览器将忽略 //position，因为 //position 不是有效的属性名称（详细信息为 here、property -> 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？