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

cchengyanhuo

cchengyanhuo

2016-02-19 19:52

有了下面这个CSS 针对 Safari(WebKit)的 CSS 注意事项教程,不懂CSS 针对 Safari(WebKit)的 CSS 注意事项的也能装懂了,赶紧get起来装逼一下吧!

Google Chrome 的发布,使我们更加的注重基于 WebKit 核心的浏览器的表现情况,但我们很多时候“不小心”就会出现问题。考虑下面极端的情况

.box {
    background: red;
    #
    background: yellow;
    background: #green;
}经过测试发现,Exploer 系列浏览器会显示黄色(yellow),Firefox 与 Opera 则会显示红色(red),而 Safari 以及 Chrome 则会显示绿色(green)。

按照本人的理解,这是各浏览器 CSS 解释上的差异造成的。首先,Safari 会对于 #red 这样的“常量颜色值”会尝试解析,而其他浏览器则取“#”后面的 16 进制色值。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

然后对于

.box {
    #
    background: yellow;
}的理解,Exploer 系列会直接解析成 background: yellow; 而其他浏览器则等待“;”然后连接起来,所以不起作用。类似的可以使用

.box {
    .
    background: yellow;
}测试下。但如果语句后面加上分号“;”

.box {
    #; /* 或者 .; */
    background: yellow;
}则会恢复正常。可以参考这里,获得更进步的详细信息。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

总结下的结论,首先,比如你想针对 Exploer 仅 Hack 一条语句,那么可以在其上行简单加个“.”或者“#”,这仅适合临时调试使用。

其次,期前如果不小心写成 #red 这样的色值,可能会无关要紧。但就目前众多的浏览器情况而言,可能就会有上述意想不到的结果,所以 CSS 方面的细节我们要更慎重的对待。

资料引用:http://www.knowsky.com/441112.html

展开更多 50%)
分享

猜你喜欢

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

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

Dreamweaver使用CSS的注意事项

Web开发
Dreamweaver使用CSS的注意事项

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DW制作网页时使用CSS的注意事项

Web开发
DW制作网页时使用CSS的注意事项

针对class、id所做的CSS HACK

Web开发
针对class、id所做的CSS HACK

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5 CSS过度-webkit-transition使用介绍

Web开发
html5 CSS过度-webkit-transition使用介绍

网页设计中针对中文排版CSS心得

Html CSS布局 Div+CSS XHTML
网页设计中针对中文排版CSS心得

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

使用access数据库时可能用到的数据转换

使用access数据库时可能用到的数据转换

用MySQL实现SQL Server的Sp_executesql

用MySQL实现SQL Server的Sp_executesql
下拉加载更多内容 ↓