浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊。
现在有了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 内核
以前对 IE9 以下兼容方法是直接在 HTML 的 head 头里面放个 IE 的兼容模式代码
<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 区别显示就总结到此,以后再慢慢添加具体的某些兼容方法。
浏览器 CSS 兼容写法的测试总结的更多相关文章
- Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- 浏览器CSS兼容
一.<important 在IE6及FF中的使用>.box1 {width:150px !important;} .box1 {width:250px;} !important是说这个设置 ...
- 【转载】各浏览器CSS兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- 各浏览器CSS兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- css兼容写法
css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼 ...
- ie浏览器css兼容样式实例
background-color:#f00;/*all*/background-color:#0ff\0;/* ie 8/9 */background-color:#0f0\9\0;/* ie9 */ ...
- javascript:currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
随机推荐
- MVC源码解析 - 配置注册 / 动态注册 HttpModule
本来这一篇, 是要继续 Pipeline 的, 但是在 Pipeline之前, 我看到了InitModules()方法, 所以决定, 在中间穿插一篇进来. 这一篇来讲一下 IHttpModule 的加 ...
- Redmine管理项目2-邮件通知
下面是为Redmine配置邮件通知 配置文件 config/configuration.yml 是 Redminde 的配置文件,里面有非常多的选项,邮件通知.附件保存地址. SCM .rmagick ...
- # 关于string
关于string 头文件 #include <string> using std::string; string定义和初始化 string s1; string s2(s1); strin ...
- 单机Hadoop搭建
通过一段时间的学习,我在我的centos上安装了单机hadoop,如果这对你有帮助,就进来探讨学习一下 Hadoop伪分布式配置 Hadoop 可以在单节点上以伪分布式的方式运行,Hadoop 进程以 ...
- shrio配置说明
1.引入Shiro的Maven依赖 <!-- Spring 整合Shiro需要的依赖 --> <dependency> <groupId>org.apache.sh ...
- 效果网址http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html
http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html
- 设计模式 -- 中介者设计模式 (Mediator Pattern)
中介者模式的定义:将多对多关系分散为一对多的关系,将网状结构变成星状结构,降低复杂度,提高扩展性. 角色: Mediator :抽象中介者角色,以抽象类的方式实现,生命具体对象,以及抽象方法: Con ...
- 【Python】使用多个迭代器
如果要达到多个迭代器的效果,__iter__()只需替迭代器定义新的状态对象,而不是返回self class SkipIterator: def __init__(self, wrapped): se ...
- 无法定位程序输入点__gxx_personality_v0的一个解决方法
windows系统,使用mingw32-g++编译一个简单的工程,编译链接过程都没有错误提示,但是运行的时候会弹出提示框提示"无法定位程序输入点__gxx_personality_v0&qu ...
- LeetCode 319. Bulb Switcher
There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...