为什么当上一行包含注释时背景颜色：属性会中断？答案

【问题标题】：Why does background-color:attribute break when previous line contains comments?为什么当上一行包含注释时背景颜色：属性会中断？
【发布时间】：2014-12-21 15:46:03
【问题描述】：

所以我在最新版本的 chrome 上试验了内部样式表，似乎有一个错误会破坏代码。

由于某种原因，我无法在 background-color:rgb(51,51,51) 之前添加任何 cmets 而不会导致代码失败。

这是我的代码（背景颜色不变）：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <style> 
        body {
            width:100%; <!--browser screen must be fixed width-->
            height:100%; <!--and height-->
            margin:0px; <!--removes uneven margin added to row's margins-->
            background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
        }
    </style>
</head>

<body>
    <h1>
        Headline
    </h1>
</body>
</html>

这是我的其他代码（这次后台工作）：

<html lang="en">
<head>
    <meta charset="utf-8">
    <style> 
        body {
            background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
            width:100%; <!--browser screen must be fixed width-->
            height:100%; <!--and height-->
            margin:0px; <!--removes uneven margin added to row's margins-->
        }
    </style>
</head>

<body>
    <h1>
        Headline
    </h1>
</body>
</html>

请注意 cmets 可能没有意义（我删除了额外的代码但保留了 cmets）。那么究竟发生了什么？我做错了什么？

【问题讨论】：

标签： html css styles comments

【解决方案1】：

如CSS2 specification中所定义：

注释以字符“/*”开始，以字符“*/”结束

所以你应该在 CSS 中使用/* */ cmets。

不过，HTML 样式的 cmets  也是可能的，但唯一有效的位置是包装整个 CSS 规则块：

<style>
    <!--
    body {
        background-color:rgb(51, 51, 51);
        width:100%;
        height:100%;
        margin:0px;
        color: red;
    }
    -->
</style>

 分隔符用于防止不支持 HTML 3.2 的浏览器显示 CSS 块。（这与使用  包装 Javascript 代码相同）。不过，这些都是非常古老的用户代理。

【讨论】：

【解决方案2】：

您使用了错误的注释语法，请使用块注释

/* my comment */

【讨论】：

我会把你标记为正确答案，因为你回答得更早。我知道 /* */ 是 css 的注释语法，但我认为由于代码位于 html 文件中，我将不得不使用 html 语法。将其更改为 /* */ 确实有效。编辑：我需要 5 分钟才能标记答案，我稍后再做。

【解决方案3】：

在 css 中你不要像 html 那样评论，而是用这种方式评论

 /* background: grey ;  */

【讨论】：