浏览器 CSS 兼容写法的测试总结
来源:互联网 发布:虚拟网络电话软件 编辑:程序博客网 时间:2024/05/21 17:14
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊。
现在有了IE9,IE10还好些,几乎和 Chrome,Firefox 差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法:
对于 IE6、IE7、IE8 进行 CSS 兼容方法可以看看这篇文章
http://blog.csdn.net/zhouzme/article/details/18901657
这样做就只需要兼容IE6,IE7。但是无法通过 W3C 验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。
注意若要用此设置是不能通过 IE 特有的 HTML 浏览器判断语法的来控制的,如:
这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别
08.22 补充:
针对IE9兼容之前的写法有问题
现在有了IE9,IE10还好些,几乎和 Chrome,Firefox 差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法:
对于 IE6、IE7、IE8 进行 CSS 兼容方法可以看看这篇文章
http://blog.csdn.net/zhouzme/article/details/18901657
以下方法均在 IE6、IE7、IE8、IE9、Chrome、Firefox 中测试过,其他如 Opera 浏览器等感觉国内没什么用户的就未涉及
对进行应用开发的另外说明:
- 360 安全浏览器使用的是 IE7 内核,
- 08.22补充:今天看了看360的告别IE6站长活动,他的浏览器最近好像升级到IE8内核了,估计安全桌面内核应该也升级为 IE8了
- 360 安全桌面应用使用的也是 IE7 内核,
- 腾讯的 Qplus 桌面应用的IE模式使用的是 IE8 内核
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />
这样做就只需要兼容IE6,IE7。但是无法通过 W3C 验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。
注意若要用此设置是不能通过 IE 特有的 HTML 浏览器判断语法的来控制的,如:
<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->
这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别
CSS兼容方法:
- 仅 IE6 和 IE7 识别,使用 * 星号
- 仅 IE6 识别,使用 _ 下划线区别
- 仅 IE7 识别,使用 + 加号
- 仅 IE8 和 IE9 识别,使用 \0 符号
- 仅 IE9 识别,使用 \9\0 ,同上, 多次测试后发现无效,后面有补充
- 仅 IE6 不能识别: !important ,
- 全部 IE 均可识别 \9 ,
使用顺序:
#test { color:green !important; color:#EEE; color:#0F0\9; color:#09F\0; color:#F00\9\0; *color:#000000; +color:#630; _color:#FF0;}
08.22 补充:
针对IE9兼容之前的写法有问题
:root #test { color:#F00\0; }这次测试发现貌似只有这样写才能真正的只让 IE9 识别
以上CSS将在 ie6 中显示 #FF0 颜色, IE6以上版本和 chrome、firefox 中显示 green,
- 去除 !important 后
- IE6, 显示 #FF0
- IE7, 显示 #630
- IE8, 显示 #09F
- IE9, 显示 #F00
- chrome、firefox 中显示 #EEE ,
以上的各种特殊符号对浏览器兼容基本上就够了,唯一缺憾是无法区别 chrome 和 firefox,不过还好他们两个的样式基本上差不多的,对于一些特殊的 css 属性可以添加各浏览器私有的属性前缀进行区别,但仅限部分样式有效
- -webkit- Chrome ...
- -moz- Firefox
- -ms- Microsoft
- -o- Opera
OK,对个浏览器的兼容大概 CSS 区别显示就总结到此,以后再慢慢添加具体的某些兼容方法。
0 0
- 浏览器 CSS 兼容写法的测试总结
- 浏览器兼容的css写法
- css和javascript浏览器兼容写法总结
- 透明背景图片的css兼容浏览器写法
- 兼容不同浏览器的 CSS Hack 写法
- 兼容不同浏览器的 CSS Hack 写法
- 兼容不同大小浏览器的css写法
- 浏览器兼容的JS写法总结
- 浏览器兼容的JS写法总结
- CSS浏览器前缀兼容写法
- 浏览器CSS兼容总结
- css浏览器兼容总结
- CSS hack之区别不同浏览器兼容的写法
- CSS HACK:浏览器兼容的一些写法 【转】
- 针对各种浏览器css不兼容的写法 (转)
- 针对各种浏览器css不兼容的写法
- 透明样式,兼容全浏览器的css写法如下
- CSS Hack 浏览器兼容写法 用法
- 业务反欺诈图书
- Eclipse中设置编码的方式
- sed用法总结
- CEF的C#实现,可以实现用Chrome来渲染UI,期待已久的UI解决方案。
- awk用法
- 浏览器 CSS 兼容写法的测试总结
- 基础练习 十进制转十六进制
- 【经验】Java中引用同一个object造成的bug
- 在SQL2008中,如何让id自动生成并自动递增?如何让时间默认生成?
- A Mathematical Curiosity
- 蓝桥杯 逻辑推断类型题目
- [数据结构]对链表、栈、队列的总结
- 纯 CSS 实现三角形尖角箭头的实例
- 4.3 Activity的停止和重新启动