1

今天无意中发现了这个：

<hr width=100% color=red />

创建一个红色的水平规则，但是

<hr width=100% color=red/>

创建绿色水平线。

这不仅仅是颜色red，如果颜色名称后面直接有一个/，则会绘制另一种颜色。这不适用于#000000(to #000000/) 之类的颜色代码。

只是出于好奇，这是我的问题：如何选择颜色？这是一个错误还是有意的？

附加信息：

浏览器：谷歌浏览器 29.0.1547.66 m

已安装的插件/附加组件：Ad Block Plus

我用 IE 10 测试了这个，它和 Chrome 有同样的问题。

4

4 回答 4

4

这是，有点令人惊讶的是，故意的错误处理，在第2.4.6 节HTML5 CR 的颜色中描述。它可能是为了保持与传统内容的兼容性，这些内容具有奇怪的颜色指示符，这些指示符传统上由浏览器以某种方式处理。

当使用混合语法（部分 HTML，部分 XHTML）标记<hr width=100% color=red/>时，在作为 text/html 服务的文档中（当使用 XHTML 内容类型服务时，它只会导致显示错误消息），该color属性将被解析为red/（斜杠作为值的一部分）。由于这与任何颜色名称都不匹配，因此将应用解析旧颜色值的规则。

这意味着任何不是十六进制数字的字符都将替换为数字 0，如果结果值不是六个字符长，则将添加尾随零。最后，该值以 为前缀#，因此它将被解释为十六进制颜色指示符。因此，red/产量#0ed000，这是您看到的浅绿色。

同样，<hr width=100% color=blue/>会导致颜色#b00e00被使用。

当然，可以通过使用 HTML 语法（没有/before >）或 XHTML 语法（在每个属性值周围都有引号）来避免这个问题。

于 2013-09-17T17:18:40.907 回答
1

浏览器的语义分析器检测<hr>标签，然后尝试确定该标签的属性。

使用空格作为标记分隔符，您的第一行有 3 个属性（请注意，在 html 中完成标记的正确斜杠是 / ）。在这种情况下，第二个标记color=red被解释为属性（颜色）和值（红色）。在您的第二行中，只有 2 个属性。第二个属性（颜色）的值red\不是颜色关联数组中的有效标识符。

为什么你的浏览器返回蓝色？

每个浏览器都以不同的方式管理异常，可能是您的浏览器返回关联数组颜色中的第一个值。

我应该向您推荐使用引号作为属性值的分隔符。

于 2013-09-17T15:43:56.187 回答
0
  • 我刚试过，它有效。
  • 首先我复制你的代码并执行，这是出乎意料的。我仍然尝试相同的代码，我只是在颜色名称周围加上“”（双引号），并尝试了颜色代码。
  • 我发现，它可以与 Crome、IE 和 Mozilla 一起正常工作。
于 2013-09-23T15:04:44.757 回答
-1

使用颜色属性可能是问题所在。尝试边框颜色。

<hr width="100%" style="border-color:#f00">
于 2013-09-17T15:35:20.417 回答