开发者问题收集

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

2011-11-29
782508
html browser background-color

为什么某些随机字符串在 HTML 中作为背景颜色输入时会产生颜色？

例如， bgcolor="chucknorris" 会产生 红色背景 ： 

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

相反， bgcolor="chucknorr" 会产生 黄色背景 ： 

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

这在各种浏览器和平台上都适用。这是怎么回事？

3个回答

这是 Netscape 时代的遗留：

Missing digits are treated as 0[...]. An incorrect digit is simply interpreted as 0. For example the values #F0F0F0, F0F0F0, F0F0F, #FxFxFx and FxFxFx are all the same.

它来自博客文章 关于 Microsoft Internet Explorer 的颜色解析的一点抱怨 ，其中详细介绍了这一点，包括不同长度的颜色值等。

如果我们依次应用博客文章中的规则，我们会得到以下内容：

  1. 将所有无效的十六进制字符替换为 0： 

    chucknorris 变成c00c0000000

  2. 填充到下一个能被 3 整除的总字符数（11 → 12）： 

    c00c 0000 0000

  3. 分成三个相等的组，每个组件代表 RGB 颜色的相应颜色组件： 

    RGB (c00c, 0000, 0000)

  4. 从右边截断每个参数为两个字符。

最后得到以下结果： 

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" ，然后，它就会变成棕色。

dash
2011-11-30

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

规则规定：

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

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

最初回答颜色为 #CC0000 的回答者已修改其答案以包含更正。

Jeremy Goodell
2012-10-17

原因是浏览器 无法理解 该字符，因此试图以某种方式将其转换为可以理解的字符，在本例中为 十六进制 值！...

chucknorris 以 c 开头，该字符在十六进制中是可识别的字符，同时它将所有无法识别的字符转换为 0 ！

因此，十六进制格式的 chucknorris 变为： c00c00000000 ，所有其他字符变为 0 ，而 c 保持原样...

现在将它们除以 3 得到 RGB （红、绿、蓝）... R：c00c，G：0000，B：0000 ...

但我们知道 RGB 的有效十六进制是仅 2 个字符，表示 R: c0, G: 00, B:00

因此，真正的结果是： 

bgcolor="#c00000";

我还在图片中添加了步骤，供您快速参考：

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

Alireza
2017-07-01