为什么Internet Explorer中的3位十六进制颜色代码值有不同的解释?

sea*_*van 11 html internet-explorer colors

Internet Explorer究竟是如何解释它们的,以及哪些指南或标准集?

例如:

#FFF

例如,Google Chrome中的颜色为白色,而在Internet Explorer中(我在8和9上测试过它)显示为黑色.

我用来测试的代码如下:

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

(我知道这bgcolor已被弃用,这对我手头的工作来说很方便).

我也知道这是一个错误,并且可以通过在十六进制代码中附加几个数字(全部6)来轻松修复它,但我只是想看看为什么会发生这种情况的科学,如果有的话是一个解释.

Git*_*LAB 17

因为你"有兴趣看到它为什么会发生的科学,如果有解释的话" ......

TLDR:

"颜色值"不是"普遍的".

缩写/简写三位十六进制#RGB形式在CSS规范中描述,而不是在HTML中描述.因此,除了"样式"或<style>标记内的属性中的三位数形式在某些浏览器中不会被解释为有效颜色.
https://en.wikipedia.org/wiki/Web_colors



深入:

我从CSS 1规范,颜色单位(6.3)开始(因为它介绍了一些我不必重复的术语/概念),它指定:

颜色是关键字或数字RGB规范.

建议的关键字颜色名称列表是:浅绿色,黑色,蓝色,紫红色,灰色,绿色,石灰色,栗色,海军蓝色,橄榄色,紫色,红色,银色,蓝绿色,白色和黄色.这16种颜色取自Windows VGA调色板,其RGB值未在本规范中定义.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Run Code Online (Sandbox Code Playgroud)

RGB颜色模型用于数字颜色规范.这些示例都指定了相同的颜色:

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% */
Run Code Online (Sandbox Code Playgroud)

十六进制表示法的RGB值的格式是' #'后面紧跟三个或六个十六进制字符.三位RGB表示法()通过复制数字而不是通过添加零#rgb来转换为六位数形式(#rrggbb).例如, #fb0展开到#ffbb00.这确保#ffffff可以使用短符号(#fff)指定white()并删除对显示颜色深度的任何依赖性.

功能表示法中RGB值的格式为' rgb('后跟逗号分隔的三个数值列表(三个整数值范围为0-255,或三个百分比值范围为0.0%至100.0%) )接着' )'.数值周围允许有空格字符.

应修剪数值范围之外的值.因此,以下三条规则是等效的:

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% */
Run Code Online (Sandbox Code Playgroud)

RGB颜色在sRGB颜色空间中指定.UA可能在它们代表这些颜色的保真度方面有所不同,但sRGB的使用提供了对颜色应该是什么的明确且客观可测量的定义,这可以与国际标准相关.

在CSS的上下文中,关于浏览器支持,我能找到的唯一2个"有趣"的东西是:

  • 支持样式表(3及以上版本,除了IE3 MAC)支持,这三个字符的十六进制颜色的简写形式,所有的浏览器 (来源:1,2,"优化CSS颜色"借景AB)
    需要注意的是文本的历史时间表. IE3 ......在Mac上......像FireFox 1或Chrome这样的浏览器甚至不在那时......
  • 这两种rgb()方法遭受Internet Explorer 3不支持它们
    来源:1(非常好读)



按照HTML4规范,该属性 bgcolor是只为<body>,<table>,<tr>,<th><td>.(因此就遗留规范而言,人们不能在a上使用它<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
 -->
Run Code Online (Sandbox Code Playgroud)

这里的神奇短语是:" 使用sRGB的颜色:#RRGGBB作为十六进制值 ".

如果我戴着规范实施者的帽子读到这个,我必须同意我没有看到#RGB指定的简写3位数表示法,我不会实现它(我也没有实现RGB(DDD,DDD,DDD)).

对于HTML5,该bgcolor属性已针对所有以前(HTML4)指定的元素废弃(参见上文).
这意味着,就规范而言,有效"颜色代码"的格式不会很快改变.



结论:

在HTML属性上接受命名颜色(来自指定/支持的列表)或'hex triplet'(格式#RRGGBB)sRGB颜色值bgcolor不是错误; 这是每个规格!
跨浏览器解决方案:..请参阅规格☺

如果错误地bgcolor在不支持该解析/渲染引擎的解析/渲染引擎上指定了一个短手颜色值,那么要么没有任何反应,要么显示出非预期的颜色; 实际上,你已经进入了'Chuck Norris'-land ..
最值得注意的是MS IE和MS Outlook,颜色看起来几乎是黑色的.例如:( #ff0简写)将成为#0f0f00(而不是#ffff00).又如:#07c将成为#00070c等等.
然而一些其他实现转#ff0#000ff0#07c#00007c!如果错误地指定了RGB(RRR,GGG,BBB)bgcolor,则可以出现各种颜色,例如RGB(255,255,255)可以变成非常暗的绿色来源

所以在这里我们有一个有趣的例子,微软的IE浏览器(所有已知的版本,包括IE11)没有按照规范和很多人仍抱怨..
我发现关于无数的bug rapports "3位数的色值速记"错误'for bgcolor-attribute'(跨越15年)在例如MS IE,使用MS IE HTML解析/呈现引擎的替代浏览器和大多数基于本地应用程序/网络的电子邮件客户端(如Gmail,所有版本的Outlook)中解决(-Express),Lotus Notes中,机器人,等等等等等等(例如1,2,3,4,5,等)

为什么投诉/ bug-rapports?
因为其他一些浏览器(如FireFox,Chrome)支持其他格式的颜色值,然后支持#RRGGBB HTML的属性bgcolor.
为什么其他人支持它?
我只有2个猜测:(a)这是"BrowserWar 1"的遗留物,其中一场战斗是围绕"我的浏览器可以让'感觉'更大的cr @ p-code然后是竞争对手的",但更有可能是(b)重用CSS颜色值解析器中的代码...... 最终我也会这样做



额外:

2015年为什么还有人会关心bgcolor
为什么这仍然会产生如此多的bug-rapports和问题?
答案是HTML电子邮件 ......
理论上(对于毫无戒心的网络开发人员)它只是"HTML和CSS".
在实践中,要做到这一点非常困难(1).想一想:所有跨浏览器的问题都存在于3的强大之处!
它必须在许多平台上工作更多的电子邮件客户端(实际上仍在使用的"遗留"应用程序的负载),它还必须在基于Web的客户端工作,如Gmail,AOL,Yahoo,Hotmail等. .
必须不仅必须编码可想象的最低公分母(很多技术已经被认为是十年前的古老),它们甚至必须尝试"适应"某些网络的布局/风格基于客户.

他们的典型结构是一个大的背景表,然后是一个div,然后是一个主表,如果需要的话还有嵌套表......
根据石蕊(anno 2014)将事情放到更深入的视角:
" 事实证明这是最可靠的方式编码背景颜色的方法是使用bgcolor表格和td级别的带有6位十六进制代码的HTML 属性 "



很明显,这种"混乱"不会很快消失,对于网络开发人员来说,常见的事情就是编写/设计HTML电子邮件...因此,我认为对此问题的完整理解(以及对此问题的回答)是仍然非常相关anno 2015和不久的将来.

希望这可以帮助!

PS:MS IE filter: progid:DXImageTransform.Microsoft.gradient也不接受3位十六进制速记颜色值,但现在提醒人们注意"颜色值不是通用"的概念,这不是一个惊喜(并不是一个错误,除非它是指定它会接受这样的值).


Eni*_*aRM 4

我也能够在 IE11 中重新创建它。如您所知,它是一个已弃用的属性。我假设您的网页和浏览器正在尝试将代码解释为 HTML5,并且它们在处理此问题的优雅降级中存在一个错误。所以它就坏了。

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

我什至不会浪费时间把它写成bgcolor一个属性。如果我在正在做的事情中遇到它,我会删除它以支持

style="background-color: #fff"
Run Code Online (Sandbox Code Playgroud)

或 CSS 替代方案

body {
    background-color: "#fff";
}
Run Code Online (Sandbox Code Playgroud)