| 订阅 | 在线投稿
分享
 
 
 

CSS 针对 Safari(WebKit)的 CSS 注意事项

来源:互联网网民  宽屏版  评论
2008-09-24 07:29:59

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 方面的细节我们要更慎重的对待。

 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
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 方面的细节我们要更慎重的对待。
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有