标准参考
注释元素(Comment Element)的作用是,注释一行或多行 HTML 代码,在注释标签内的文本不被显示,但对通过查看页面源码的方式还是可见的。
注释标签的标准写法如下:
// 单行注释
<!-- this is a comment -->
// 多行注释
<!-- and so is this one,
which occupies more than one line -->
另,根据 W3C HTML 4.01 文档中的描述,需注意以下几点:
- 注释元素的开始标签 “<!” 和 “--” 之间不允许有空白符存在,但是在各浏览器下就算它们之间存在空白符,也能被正确的识别,如下代码所示:
// 此处的注释,在各浏览器下,都能被作为注释标签正常识别
<! -- this is a comment --> - 注释元素的关闭标签 “--” 和 “>” 之间允许有空白符存在。
- 应避免在注释内容中出现两个或以上的“-”字符,否则可能会出错。
关于 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 -->
解决方案
按标准推荐的方法写注释标签,如:
<!-- //此处 "<!" 和 "--" 之间尽量不要有空格。
这里是注释内容,应避免在注释内容中出现两个或以上的“-”字符。
--> //此处 "--" 和 ">" 之间避免有空格。
参见
知识库
相关问题
测试环境
操作系统版本: | Windows 7 Ultimate build 7600 |
---|---|
浏览器版本: | IE6 IE7 IE8 Firefox 3.6.3 Chrome 5.0.375.9 dev Safari 4.0.4 Opera 10.51 |
测试页面: | |
本文更新时间: | 2010-06-18 |
关键字
HTML 注释标签 注释 连字号 空格 comment