CSS注意事项: 针对 Safari(WebKit)
时间:2008-10-29 11:57:00
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 方面的细节我们要更慎重的对待。
标签:Chrome,Safari,浏览器,css


猜你喜欢
TypeScript中extends的正确打开方式详解
2024-02-25 07:14:18
MYSQL大数据导入
2024-01-18 18:09:36
跟老齐学Python之坑爹的字符编码
2021-07-13 06:07:38

手把手教你安装Windows版本的Tensorflow
2021-07-12 07:03:15

python正向最大匹配分词和逆向最大匹配分词的实例
2021-11-24 22:39:58
mysql连接查询详解
2024-01-15 16:42:11

自动备份mssql server数据库并压缩的批处理脚本
2024-01-24 00:30:11
django2笔记之路由path语法的实现
2023-04-16 06:23:54
教你用Python+selenium搭建自动化测试环境
2021-10-27 02:52:49

MySQL存储过程中使用动态行转列
2024-01-16 22:03:16

PyQt中使用QProcess运行一个进程的示例代码
2021-10-16 15:57:39

Python实现简单的文件传输与MySQL备份的脚本分享
2024-01-21 04:44:44
36个折纸风格logo设计
2009-09-17 13:13:00

python从PDF中提取数据的示例
2021-10-15 21:46:05

对python3中的RE(正则表达式)-详细总结
2022-12-28 23:33:41

python中扫描条形码和二维码的实现代码
2023-02-15 23:00:12

Python中的with...as用法介绍
2023-03-30 11:17:19
PHP封装的数据库模型Model类完整示例【基于PDO】
2023-11-15 21:06:42
python经典趣味24点游戏程序设计
2022-05-14 12:13:20

让程序员都费解的10大编程语言特性
2023-09-12 03:56:49