<hr>中颜色错误

今天我偶然发现了这个:

<hr width=100% color=red />

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

<hr width=100% color=red/>

创建一条绿色的横向规则。

这不仅仅是red ,如果颜色名称后面有一个/ ,则会绘制另一种颜色。 这对#000000 (至#000000/ )之类的颜色代码不起作用。

只是好奇心, 这里是我的问题 :如何选择颜色? 这是一个错误还是打算?


附加信息:

浏览器:Google Chrome 29.0.1547.66米

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

我用IE 10测试了它,它和Chrome有相同的问题。


这有点令人惊讶地是故意的错误处理,在第2.4.6节HTML5CR的颜色中描述。 这大概意味着保持与遗留内容的兼容性,这些内容奇怪地破坏了传统上由浏览器以某种方式处理的颜色标识符。

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

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

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

当然可以通过使用HTML语法(其中没有/ before > )或XHTML语法(每个属性值附带引号)来避免该问题。


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

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

为什么你的浏览器回蓝?

每个浏览器管理不同方式的异常,可能是您的浏览器返回asociative阵列颜色的第一个值。

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


  • 我刚刚尝试过,而且很有效。
  • 首先我复制你的代码并执行,这是意想不到的。 尽管如此,我仍尝试使用相同的代码,并且只在颜色名称周围放置了“”(双引号),并尝试了颜色代码。
  • 我发现它与Crome,IE和Mozilla正常工作。
  • 链接地址: http://www.djcxy.com/p/2529.html

    上一篇: Wrong colors in <hr>

    下一篇: My jQuery doesn't change the fontcolor with the .css() function