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

发表于 2011-11-29 22:54:22

活跃于 2019-11-14 17:45:02

查看 501,946 次

html browser background-color

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

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

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

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

这里发生了什么？

===============>>#1 票数：6666 已采纳

这是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" ，结果它变成棕色。

===============>>#2 票数：928

抱歉，不同意，但是根据解析@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的原始答复者已经编辑了他们的答案以包括更正。