浏览器之家


Safari CSS 相关问题全攻略

Safari使用的是Webkit内核,看了这篇

Stokely Safari Hack

<style type="text/css">

#example {
color:red;
}/* firefox有效 */

/*\*/
html*#example {
[color:black;color:blue;/* Safari有效 */
]color:green;/* IE有效 */
}/**/

</style>
<div id="example">
Stokely Safari Hack : If you See Large Blue Text, you are using Safari
</div>
上面定义的文本颜色结果为:
Firefox显示为红色,IE显示为绿色,Safari中显示为蓝色。
单纯使用这个方法,可以为Firefox、IE6、Safari定义不同的样式,但是对于IE7还需要辅助其他Hack来定义,这个Hack在Safari 2.0.4中测试通过。

不过很遗憾,这个Hack不能通过CSS标准校验 

另一个 Safari CSS Hack 方法
虽然以前用 Safari 的人不多,但随着苹果用户不断增加和 x86 Mac OSX 的出现,Safari 浏览器的市场占有率也不断攀升,所以写 CSS 的时候也得考虑一下 Safari 用户。为什么我比较关注 Safari 的 CSS Hack,原因就是找不到方法去除 Safari 默认的 input 效果。

针对 Safari 的 CSS Hack 很少,除了上次介绍的 “Stokely Safari Hack” 最近又发现了 jeffrey barke 的 Safari CSS Hack,他的这个方法相比 Stokely Safari Hack 更简单,而且能做到真正的只针对 Safari (由于 Safari 使用的 WebCore 引擎来源于 Konqueror 的 KHTML,他们有很多相似之处,所以 Stokely Safari Hack 对 Konqueror 也起了作用)。不好的就是被 hack 的那个 CSS 必须放在整个 CSS 文件的最后,不然后面定义的 CSS 对 Safari 就没有作用了。这 2 个方法有一个共同的缺点,都不能通过 CSS 标准校验。

Safari CSS Hack
p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }
[demo]

说明:如果是 Safari 浏览器,文本显示为 #FF0000 这个颜色,字体为普通粗细;其他浏览器文本则显示为 #000000 这个颜色,字体为粗体。

Safari CSS Hack

附:各种常见浏览器使用的内核 (Rendering Engine)

Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari ( WebKit )

评论

没安装畅言模块