Question

今天我偶然发现了这个：

<hr width=100% color=red />

创建一个红色水平线，但

<hr width=100% color=red/>

创建绿色水平线。

这不仅仅是颜色red，如果颜色名称后面有/，则会绘制另一种颜色。这不适用于#000000（至#000000/）等颜色代码。

只是好奇，这是我的问题：如何选择颜色？这是一个错误还是打算？

其他信息：

浏览器：Google Chrome 29.0.1547.66 m

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

我使用IE 10进行了测试，它与Chrome有同样的问题。

Answer 1

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

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

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

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

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

Answer 2

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

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

为什么浏览器会返回蓝色？

每个浏览器都管理不同方式的异常，可以说浏览器返回的是第一个非接触数组颜色的值。

我建议您使用引号作为属性值的分隔符。

Answer 3

我刚尝试过，它确实有效。
首先我复制你的代码并执行，这是出乎意料的。我仍然尝试相同的代码，我只是在颜色名称周围加上“”（双引号），并尝试了颜色代码。
我发现，它与Crome，IE和Mozilla一起正常工作。

Answer 4

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

<hr width="100%" style="border-color:#f00">

<hr />中的颜色错误

4 个答案:

为什么浏览器会返回蓝色？