ie6,ie7,火狐css hack总结
2013-12-08 12:00
288 查看
转自:http://www.divcss5.com/css-hack/c23.shtml
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。
IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.
因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(Firefox)这3个浏览器即可兼容全部浏览器。
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
具体区别如下:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
总结:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6支持下划线,IE7和firefox均不支持下划线。
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;以下是各浏览器CSS hack表格
于是大家还可以这样来区分IE6,IE7,firefox: background:orange;*background:green;_background:blue;
以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:
要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)
则CSS代码如下:
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。
希望以上div+css整理CSS hack对你有帮助。
我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。
IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.
因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(Firefox)这3个浏览器即可兼容全部浏览器。
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
具体区别如下:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
总结:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6支持下划线,IE7和firefox均不支持下划线。
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;以下是各浏览器CSS hack表格
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:
要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)
则CSS代码如下:
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。
希望以上div+css整理CSS hack对你有帮助。
相关文章推荐
- IE6 IE7 FF的CSS Hack总结(转载)
- IE6 IE7 FF的CSS Hack总结
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
- IE6、IE7、Firefox兼容CSS Hack总结
- 总结--IE6,IE7,IE8,火狐都支持:js/css 底部固定, 底部固定漂浮导航效果
- 黄聪:DIV+CSS建站经验总结,不同版本IE下CSS布局bug问题(IE5、IE6、IE7、IE8、火狐Firefox兼容)
- 一些IE6 IE7 IE8 FF的CSS hack
- IE6、IE7、IE8、Firefox兼容性CSS HACK问题
- CSS hack:区分IE6,IE7,firefox
- CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox
- 转载,必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧
- CSS HACK区别IE6、IE7、IE8、Firefox兼容性
- DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
- IE6、IE7、IE8、Firefox、Opera、谷歌浏览器、Safari CSS hack区分,浏览器兼容性
- 区别FF,IE7,IE8,IE6浏览器的CSS hack
- firefox, IE6, IE7在CSS hack上的入口点
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK
- CSS hack:区分IE6,IE7,IE8和Firefox (2009-06-02更新)
- 前端开发学习之道:DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
- DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)