您当前的位置: 首页 » DIV+CSS编程 » CSS注意事项: 针对 Safari（WebKit）
CSS注意事项: 针对 Safari（WebKit）
论坛链接
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 方面的细节我们要更慎重的对待。
以下为引用的内容：
.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 方面的细节我们要更慎重的对待。