<hr> 中的颜色错误答案

【问题标题】：Wrong colors in <hr><hr> 中的颜色错误
【发布时间】：2013-09-22 03:10:00
【问题描述】：

今天无意中发现了这个：

<hr width=100% color=red />

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

<hr width=100% color=red/>

创建绿色水平线。

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

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

附加信息：

浏览器：谷歌浏览器 29.0.1547.66 m

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

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

【问题讨论】：

值得注意的是，你的斜线是关闭标签的错误方式<tag />
你们可能没看懂问题
类似stackoverflow.com/questions/8318911/…
@Russel Zahniser：不，你不必：stackoverflow.com/questions/17112126/…
使用正确（正向）斜杠时也会发生同样的情况。

标签： html css google-chrome colors rule

【解决方案1】：

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

【讨论】：

【解决方案2】：

有点令人惊讶的是，这是一种有意的错误处理，在 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 语法（在每个属性值周围都有引号）来避免这个问题。

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

好吧，这没有回答，但无论如何都赞成他正在使用的属性现在已弃用
@Mr.Alien 看来color attrubute 没有被弃用.. MDN.
@Mr_Green 非标准