CSS hack:区分IE6,IE7,IE8,IE9,firefox,兼容问题处理方法收集 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Oct 29

CSS hack:区分IE6,IE7,IE8,IE9,firefox,兼容问题处理方法收集 不指定

tommyhu , 21:27 , 大前端 » CSS3 , Comments(1) , Trackbacks(0) , Reads(14106) , Via Original Large | Medium | Small
20110711更新,CSS hack:区分IE6,IE7,IE8,IE9,firefox,兼容问题处理方法收集

    .test{
            color:#09F\0; /* IE8/9 */
            color:#09F\0/; /* IE8 only */
    }
    :root .test { color:#963\9; } /* IE9 only */
    /*或者下面的,但是下面的优先级小于上面的。Ps:老外的方法都是\0,根本没考虑Opera*/
    @media all and (min-width:0){
        .test{color:red\9; }/* IE9 only */
    }


20100810更新
ie6重复字解决方法
去掉注释 或 加入 overflow:hidden; 或者重写结构  或者 在重复 区域加入一个hackbox ,代码如下
<div style="height:0;line-height:0;padding:0;margin:0;"></div>
火狐下层重叠解决方法,在层中加入标签overflow:auto;
火狐下尽量不要用缩写,例如 margin:5px 4px 3px 2px; 分开写margin-top:5px; margin-right:4px; margin-bottom:3px; margin-left:2px; 相同标签有padding,border 等
尽量使用语义标签 例如标题h1,h2,h3,文字font等等


20100720最新 全面兼容ie6,ie7,IE8,Firefox的CSS Hack写法 当然顺序不能写错
[code]
#body {  
border:2px solid #00f;     /*ff的属性*/  
border:2px solid #090\9;   /* IE6/7/8的属性 */  
border:2px solid #F90\0;     /* IE8支持 */  
_border:2px solid #f00;     /*IE6的属性*/  
}  
[code]


区别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能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

另外再补充一个,下划线"_",IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox: background:orange;*background:green;_background:blue;

至于兼容IE8,放出一行代码就OK了<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
另外FIREFOX火狐下字体走样,也许是因为浏览器的默认设置,需要做更改,具体
工具--选项--内容--字体&颜色--选择“宋体”


火狐是很保守的浏览器,设置CSS的时候最好写的详细一些,例如在IE中可以这样写border-width:0px 1px 1px 1px; border:solid #006600;但在火狐中需要这样写border-top:none; border-left:1px solid #006600;border-right:1px solid #006600;border-bottom:1px solid #006600;

黄金法则:结构写的好,不需要用hack,经常看大网站写的能提高自己,当然要自己动手写才能遇到问题,总结问题,解决问题
▲返回顶部
Last modified by tommyhu on2011/07/11 22:20

互联网开发网友 Email Homepage
2010/08/11 12:52
占个沙发,这些了解了。
Pages: 1/1 First page 1 Final page
Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot