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

2016-02-19 19:52 12 1 收藏

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

【 tulaoshi.com - Web开发 】

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

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

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

然后对于

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

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

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

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

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

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

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

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

来源:https://www.tulaoshi.com/n/20160219/1622040.html

延伸阅读
标签: Web开发
淘宝首页上的一个小技巧。 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种。 背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。 缺点:最后一个还是要用class来隐藏掉背景。 符号 在每个a标签之间用”|”符号来填充。 缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。 a标签...
标签: Web开发
本人专业是做UI的,写CSS已经有好几年了,目前刚刚在博客发布关于CSS的文章,欢迎有问题的朋友在有问必答论坛提问,我一定尽力解答。 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使...
标签: Web开发
我们都知道浏览器之间是有差异的,很多人在使用XHTML+CSS方式制作网页的时候都曾为此无比头痛。要在这些差异的影响下工作需要很多的技巧,“隐藏CSS”就是其中很重要的一种技巧(甚至是最重要的)。 这种技巧的主要思想是,用某些方式对某些浏览器隐藏某些重载的CSS规则。 这篇文章并不是想教你如何使用这种技巧,它面向的是有一定CSS基础的...
标签: Web开发
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。 2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。 3、慎用 * 通配...
标签: Web开发
让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html...

经验教程

55

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部