作者：钱宝坤

标准参考

注释元素（Comment Element）的作用是，注释一行或多行 HTML 代码，在注释标签内的文本不被显示，但对通过查看页面源码的方式还是可见的。

注释标签的标准写法如下：

// 单行注释 <!-- this is a comment --> // 多行注释 <!-- and so is this one, which occupies more than
                one line -->

另，根据 W3C HTML 4.01 文档中的描述，需注意以下几点：

1. 注释元素的开始标签 “<!” 和 “--” 之间不允许有空白符存在，但是在各浏览器下就算它们之间存在空白符，也能被正确的识别，如下代码所示：
   

   // 此处的注释，在各浏览器下，都能被作为注释标签正常识别 <! -- this is a comment -->

2. 注释元素的关闭标签 “--” 和 “>” 之间允许有空白符存在。
3. 应避免在注释内容中出现两个或以上的“-”字符，否则可能会出错。

关于 HTML 注释的更多说明，请参考 HTML 4.01 规范 3.2.4 中的内容。

问题描述

注释内容含中横线（-）在 Firefox 中可能会使中间内容丢失。

造成的影响

这个问题将导致页面中的注释部分在 Firefox 标准模式(S)下被当做文本内容解释出来，从而造成文本内容异常甚至影响到页面布局。

受影响的浏览器

Firefox(S)	注释的内容连同注释标签本身被当做纯文本解析并渲染到页面上。

问题分析

W3C HTML 4.01 文档中提到，注释标签中存在两个或两个以上相连的连字号 ("-") 时，注释标签将出错。此情况只在 Firefox(S) 下出现，而在其它浏览器下，则不会出错。

以下讨论仅针对 Firefox(S) ，因为其它浏览器下均正常。

1. 出错条件

观察如下HTML代码：

<!-- 这里是注释内容 - -->

记录测试结果，然后增加注释标签内的连字号数量，如下：

<!-- 这里是注释内容 -- -->

再次记录测试结果，重复以上步骤N次，整理结果如下：

注释标签中相连连字号数量	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	...
测试结果1	T	F	F	T	T	F	F	T	T	F	F	T	T	F	F	T	T	F	F	...

【注】
1. F-出错；T-正常。

从上表可以看出，当注释标签中相连连字号数量为2的奇数倍、或2的奇数倍加1时，Firefox(S) 下注释标签出错。

另，改变相连连字号的位置，不影响测试结果，例如：改变如下

<!-- 这里是---注释内容 -->

或

<!-- ---这里是注释内容 -->

2. 一个注释中多个地方出错时

观察如下代码：

// case 1: <!-- -- a --> // case 2: <!-- -- a
                -- --> // case 3: <!-- -- a -- b
                -- --> // case 4: <!-- -- a -- b
                -- c -- --> ......

注意：代码中红色部分，只要满足【（A）情况一】中出错条件即可。

以上代码在各浏览器下的表现，汇总如下表：

case x	1	2	3	4	5	6	7	8	9	...
测试结果1	F	T	F	T	F	T	F	T	F	...

【注】
1. F-出错；T-正常。

从上表中可以看出，当注释中有多处出错时，满足负负得正的规律，即出错了偶数次时，相当于没出错，此时注释标签解析正常，反之，如果出错了奇数次，此时注释标签将出错。其实，【（A）情况一】中的出错条件也可以用负负得正的规律来解释。

3. 两个出错的注释标签，其间的内容被视为注释的一部分

观察如下代码：

<!-- --a --> abc // 这里的内容将被视为注释的一部分 <!-- --b -->

注意：代码中红色部分，只要满足【（A）情况一】/【（B）情况二】中的出错条件即可。

以上代码在各浏览器下的表现如下表所示：

	Firefox(S)	IE6 IE7 IE8 Firefox(Q) Safari Chrome Opera
输出	无	abc

从上表可以看出，在两个出错的注释标签间的内容，将被视为注释的一部分而不予显示。

Firefox(S)下，以上代码相当于如下所示的代码，此时的情况在【（B）情况二】中已经讨论过。

<!-- -- a abc -- b -->

解决方案

按标准推荐的方法写注释标签，如：

<!-- //此处 "<!" 和 "--" 之间尽量不要有空格。 这里是注释内容，应避免在注释内容中出现两个或以上的“-”字符。 --> //此处
                "--" 和 ">" 之间避免有空格。

参见

知识库

• ...

相关问题

• ...