为什么 HTML 认为 “chucknorris” 是一种颜色？

当在 HTML 中作为背景颜色输入时，某些随机字符串如何产生颜色？例如：

<body bgcolor="chucknorris"> test </body>

... 在所有浏览器和平台上生成一个红色背景的文档。

有趣的是，虽然chucknorri产生红色背景，但chucknorr产生黄色背景。

这是怎么回事这里？

html background-color

答案

这是 Netscape 时代的延续：

丢失的数字被视为 0 [...]。不正确的数字简单地解释为 0. 例如，值＃F0F0F0，F0F0F0，F0F0F，＃FxFxFx 和 FxFxFx 都是相同的。

它是来自博客文章有点咆哮关于 Microsoft Internet Explorer 的颜色解析 ，它详细介绍了它，包括不同长度的颜色值等。

如果我们依次从博客文章中应用规则，我们会得到以下信息：

用 0 替换所有无效的十六进制字符
```
chucknorris becomes c00c0000000
```
填写下一个可被 3 整除的字符总数（11 - > 12）
```
c00c 0000 0000
```
分成三个相等的组，每个组件代表 RGB 颜色的相应颜色分量：
```
RGB (c00c, 0000, 0000)
```
将每个参数从右向下截断为两个字符

这给出了以下结果：

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

这是一个演示bgcolor属性的示例，用于生成这个 “惊人的” 色样：

<table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>

这也回答了问题的其他部分; 为什么bgcolor="chucknorr"产生黄色？好吧，如果我们应用规则，字符串是：

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

这给出了淡黄色的金色。当字符串以 9 个字符开始时，我们这次保持第二个 C，因此它最终成为最终的颜色值。

当有人指出你可以做color="crap"时，我最初遇到了这个问题，而且，它出现了棕色。

我很抱歉不同意，但根据解析@Yuhong Bao发布的遗留颜色值的规则， chucknorris并不等同于#CC0000 ，而是#C00000 ，一种非常相似但略有不同的红色色调。我使用Firefox ColorZilla 插件来验证这一点。

规则规定：

通过添加 0 来使字符串的长度为 3 的倍数： chucknorris0
将字符串分成 3 个相等长度的字符串： chuc knor ris0
将每个字符串截断为 2 个字符： ch kn ri
保留十六进制值，并在必要时添加 0： C0 00 00

我能够使用这些规则来正确解释以下字符串：

LuckyCharms
Luck
LuckBeALady
LuckBeALadyTonight
GangnamStyle

更新： 原来的回答说，颜色是#CC0000已经编辑了他们的答案，包括更正。

大多数浏览器只会忽略颜色字符串中的任何 NON-hex 值，用零替换非十六进制数字。

ChuCknorris转换为c00c0000000 。此时，浏览器将字符串分成三个相等的部分，表示红色，绿色和蓝色值： c00c 0000 0000 。每个部分中的额外位将被忽略，这使得最终结果#c00000是一个偏红的颜色。

请注意，这并不适用于 CSS 颜色解析，它遵循 CSS 标准。

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>