为什么在Internet Explorer中，3位数字的十六进制颜色代码值被解释得不同？

Question

为什么在Internet Explorer中，3位数字的十六进制颜色代码值被解释得不同？

htmlinternet-explorercolors

13

Internet Explorer如何准确解释它们？遵循哪些指导方针或标准？

例如：

#FFF

在Google Chrome中，它被视为白色，而在Internet Explorer（我在8和9上测试过）中它则显示为黑色。

我用于测试的代码如下：

<body bgcolor="#ffffff"> vs. <body bgcolor="#fff">

（我知道bgcolor已被弃用，但对于我手头的工作来说很方便。）

我也知道这是一个错误，可以通过在十六进制代码中附加几个数字（总共6个）来轻松修复它，但我只是想看看它发生的科学原理，如果有的话。

- seanlevan

1

很可能是一个与已废弃的bgcolor有关的错误，如果您通过常规方法应用#fff，则没有问题。 - Aaron Vanston

@Aaron Vanston：唯一的错误/问题/难题是开发人员期望在设置（HTML的）bgcolor的无效值时获得可预测的统一结果（然后谈论CSS...）。 - GitaarLAB

2个回答

4

我也能在IE11中重新创建它。就像你知道的，这是一个被弃用的属性。我猜测你的网页和浏览器试图将代码解释为HTML5，并且在优雅降级方面存在错误。所以它只是出现故障。

正如@Aaron Vanston指出的那样，使用内联样式或CSS，您仍然可以使用简写十六进制来应用颜色。

我甚至不会浪费时间编写bgcolor作为属性。如果我在处理的某些东西中遇到了它，我会删除它并选择...

style="background-color: #fff"

或CSS替代方案

body {
    background-color: "#fff";
}

- EnigmaRM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GitaarLAB · Accepted Answer

由于您对“为什么会发生这种情况的科学原理感兴趣，是否有解释”...

简而言之：

“颜色值”不是“通用”的。

CSS规范中描述了缩写/简写的三位十六进制#RGB格式，而非HTML规范。因此，在“style”以外的属性或<style>标签内的三位数形式在某些浏览器中不能被解释为有效的颜色。
^{https://en.wikipedia.org/wiki/Web_colors}

详细说明：

我从CSS 1 spec, Color units (6.3)开始（因为它介绍了一些术语/概念，我随后就不必重复），该规范指定：

A color is a either a keyword or a numerical RGB specification.

The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
The RGB color model is being used in numerical color specifications. These examples all specify the same color:
EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.

Values outside the numerical ranges should be clipped. The three rules below are therefore equivalent:
EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
EM { color: rgb(300,0,0) }       /* clipped to 255 */
EM { color: rgb(110%, 0%, 0%) }  /* clipped to 100% */
RGB colors are specified in the sRGB color space. UAs may vary in the fidelity with which they represent these colors, but use of sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards.

在CSS的上下文中，关于浏览器支持，我能找到的唯一两个“有趣”的事情是：

所有支持样式表（版本3及以上，除了IE3 Mac）的浏览器都支持这种三字符十六进制颜色的简写形式^{（来源：1，2，King A.B.的“优化CSS颜色”）}
请注意该文本的历史时间范围... IE3... 在Mac上...像FireFox 1或Chrome这样的浏览器甚至还不存在。
两种rgb()方法不受Internet Explorer 3的支持
^{来源：1（非常好的阅读材料）}

根据HTML4规范，属性bgcolor仅适用于<body>、<table>、<tr>、<th>和<td>。（因此，就传统规范而言，例如在<div>上使用它是不允许的。）

它们全部都是CDATA类型：%Color;
其定义为：

<!ENTITY % Color "CDATA" -- a color using sRGB: #RRGGBB as Hex values -->

<!-- There are also 16 widely known color names with their sRGB values:

    Black  = #000000    Green  = #008000
    Silver = #C0C0C0    Lime   = #00FF00
    Gray   = #808080    Olive  = #808000
    White  = #FFFFFF    Yellow = #FFFF00
    Maroon = #800000    Navy   = #000080
    Red    = #FF0000    Blue   = #0000FF
    Purple = #800080    Teal   = #008080
    Fuchsia= #FF00FF    Aqua   = #00FFFF
 -->

The magic phrase here is: "使用sRGB：#RRGGBB作为十六进制值的颜色"。 ^{如果我戴上规格实现者的帽子读这个，我必须同意我没有看到简写的3位数#RGB符号规定，我也不会实现它（我也不会实现RGB(DDD,DDD,DDD)）。} 至于HTML5，所有先前（HTML4）指定的元素的bgcolor属性都已过时（参见上文）。这意味着，就规范而言，有效的“颜色代码”的格式不会很快改变。 结论：

接受HTML属性bgcolor上的命名颜色（从指定/支持列表中）或“十六进制三元组”（格式为#RRGGBB）sRGB颜色值，这不是错误；这是规范要求！
跨浏览器解决方案：...请参见规范☺

如果在不支持缩写颜色值的解析/渲染引擎上错误地指定了bgcolor的缩写颜色值，则可能什么都不会发生，或者会显示一个意外的颜色; 事实上，您已经进入了'Chuck Norris' -land。最值得注意的是对于MS IE和MS Outlook，颜色看起来几乎是黑色的。例如：#ff0（缩写）将变成#0f0f00（而不是#ffff00）。另一个例子：#07c将变成#00070c等。然而一些其他实现将#ff0转换为#000ff0，将#07c转换为#00007c！如果错误地为bgcolor指定了RGB(RRR,GGG,BBB)值，则可能出现各种颜色，例如RGB(255,255,255)可能会变成非常深的绿色阴影^source等。

这里有一个有趣的例子，微软的Internet Explorer（包括IE11在内的所有已知版本）确实遵循了规范，但仍然有很多人抱怨..
我发现了无数关于"使用3位数字颜色值简写 'bug' 来设置 bgcolor 属性"的 bug 报告（跨越15年），这些报告针对的是例如 MS IE、使用 MS IE HTML 解析/渲染引擎的替代浏览器以及绝大多数本地应用程序/基于Web的电子邮件客户端，如 Gmail、（所有版本的）Outlook(-Express)、Lotus Notes、Android等等等等。^{（例如1, 2, 3, 4, 5等）}

为什么会有投诉/错误报告？
因为一些其他浏览器（如FireFox，Chrome）在HTML的属性bgcolor中支持颜色值的格式不仅限于#RRGGBB。
为什么其他浏览器支持它？
我只有两个猜测：（a）这是“BrowserWar 1”留下的遗产之一，其中一场战斗是围绕“我的浏览器可以理解比竞争对手更大的垃圾代码”，但更有可能的是（b）重新使用CSS颜色值解析器的代码... ^{最终我也会这样做}

额外：

为什么在2015年还有人关心bgcolor？
为什么这仍然会引发如此多的错误报告和问题？
答案是HTML电子邮件...
理论上（对于不知情的Web开发人员）它只是“HTML和CSS”..
实际上，这非常难以做到⁽¹⁾。想象一下：所有曾经存在的跨浏览器问题都乘以3倍！
它必须在更多的电子邮件客户端和众多平台上运行（许多“遗留”应用程序实际上仍在使用），还必须在像Gmail、AOL、Yahoo、Hotmail等等的基于Web的客户端中运行。
他们不仅必须为可想象的最低公共分母编写代码（很多技术已经被认为是古老的了），他们甚至必须尝试与一些基于Web的客户端的布局/样式“融合”。

他们的典型结构是一个大的背景表格，然后是一个div，接着是一个主要的表格，如果需要还有嵌套表格...更进一步地说，根据litmus（anno 2014）的说法：
“事实证明，编写背景颜色最可靠的方法是在表格和td级别上使用HTML bgcolor 属性和6位十六进制代码”

显然这个“混乱”不会很快消失，对于Web开发人员来说，编写/设计HTML电子邮件是很常见的事情...因此，我认为在2015年和不久的将来，全面理解和回答这个问题仍然非常相关。

希望这可以帮到你！

PS：MS IE的filter: progid:DXImageTransform.Microsoft.gradient也不接受3位十六进制简写颜色值，但现在我们想起了“颜色值不是通用的”这个概念，这就不那么令人惊讶了（除非指定它会接受这样的值，否则不是bug）。