html - 为什么 HTML 认为 “chucknorris” 是一种颜色?

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

例如,bgcolor="chucknorris" 产生红色背景:

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

相反,bgcolor="chucknorr" 会产生黄色背景:

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

这适用于各种浏览器和平台。这是怎么回事?

最佳答案

这是网景时代的遗留物:

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.

来自博文 A little rant about Microsoft Internet Explorer's color parsing 详细介绍了它,包括不同长度的颜色值等。

如果我们依次应用博文中的规则,我们会得到以下信息:

  1. 用 0 替换所有无效的十六进制字符:

    chucknorris becomes 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" 并且,结果是棕色的。

关于html - 为什么 HTML 认为 “chucknorris” 是一种颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8318911/

相关文章:

javascript - 我如何知道通过 jQuery 选择了哪个单选按钮?

javascript - 如何检查是否在 jQuery 中选中了复选框?

html - 如何禁用 textarea 的 resizable 属性?

javascript - 如何在 HTML5 localStorage/sessionStorage

html - 在 CSS 中设置 cellpadding 和 cellspacing?

javascript - 如何使用 JavaScript 更改元素的类?

html - 如何水平居中元素?

html - 如何在 Web 表单字段/输入标签上禁用浏览器自动完成功能?

css - 使用 CSS 更改 HTML5 输入的占位符颜色

javascript - 我应该为 JavaScript 链接使用哪个 "href"值, "#"还是