Google Chrome 的发布 ,使我们更加的注重基于 WebKit 核心的浏览器的表现情况,但我们很多时候「不小心」就会出现问题。考虑下面极端的情况
.box {
background: red;
#
background: yellow;
background: #green;
}
经过测试发现,Exploer 系列浏览器会显示黄色(yellow),Firefox 与 Opera 则会显示红色(red),而 Safari 以及 Chrome 则会显示绿色(green)。
按照本人的理解,这是各浏览器 CSS 解释上的差异造成的。首先,Safari 会对于 #red 这样的「常量颜色值」会尝试解析,而其他浏览器则取「#」后面的 16 进制色值。
然后对于
.box {
#
background: yellow;
}
的理解,Exploer 系列会直接解析成 background: yellow;
而其他浏览器则等待「;」然后连接起来,所以不起作用。类似的可以使用
.box {
.
background: yellow;
}
测试下。但如果语句后面加上分号「;」
.box {
#; /* 或者 .; */
background: yellow;
}
则会恢复正常。可以 参考这里 ,获得更进步的详细信息。
总结下的结论,首先,比如你想针对 Exploer 仅 Hack 一条语句,那么可以在其上行简单加个「.」或者「#」,这仅适合临时调试使用。
其次,期前如果不小心写成 #red 这样的色值,可能会无关要紧。但就目前众多的浏览器情况而言,可能就会有上述意想不到的结果,所以 CSS 方面的细节我们要更慎重的对待。
又沙发了.
这个不符合规范啊..
颜色用16进制值就能兼容。麻烦的还是padding,margin,float等等复杂的东西。世界上只有一种浏览就好了,不管是哪种。