css hack 浏览器兼容问题

1、先说说各类主流浏览器的内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不一样的浏览器内核对网页编写的解释也不一样，反映在网页上的效果也会有所差异。

浏览器 　IE firefox chrome safari opera
内核
Trident
Gecko
Webkit
Webkit
Presto

固然，各类浏览器内核在不断更新中，表格只能做为一个简单参考，像Chromium/Bink等内核，还有各类浏览器内核的具体了解，感兴趣的能够上网查查。

由于不一样浏览器的不一样内核，致使了不一样的渲染效果，咱们在实际开发中，为了达到一致的效果，因此就出现了兼容性问题。

2、css Hack

　　css Hack 的目的就是使CSS代码兼容不一样的浏览器.

　　大体有3种表现形式：
CSS类内部Hack好比 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * ".
选择器Hack:好比 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack:针对全部IE： <[endif]-->条件注释法等.
　　书写顺序，通常是将识别能力强的浏览器的CSS写在后面。
下面是一些经常使用的CSS Hack方法
1 条件注释法




例如以上代码：

表示若是是IE浏览器的话就执行写在里面的代码，不是的话就不执行。
　　gt ：表明大于；
　　lt : 表明小于；
　　gte : greater than or equal
　　lte : less than or equal
　! :选择条件版本之外的全部版本
例如：<!--[if lt IE 7]> 就表明若是是IE7如下的版本。
2 类内属性前缀
在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果。例如：
复制代码
.test{
color:#000; /* 正常写法广泛支持 /
color:#00F\9; / 全部IE浏览器(ie6+)支持 /
/可是IE8不能识别“ * ”和“ _ ” /
[color:#000;color:#0F0; / SF,CH支持 /
color:#00F\0; / IE8支持/
color:#FF0; /* IE7支持 */
_color:#F00; /* IE6支持 /
}
复制代码
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
IE6如下能识别；不能识别 !important;
FF不能识别*，但能识别!important;
3 选择器前缀法

• html .test{color:#090;} /* For IE6 and earlier */
• • html .test{color:#ff0;} /* For IE7 /
    html 前缀只对IE6生效+html *+前缀只对IE7生效。

固然总结的这些不够详细和全面，具体应用还得在实际开发中依据状况而定。

2、css兼容性的相关问题

一、padding 与 margin 问题
不一样的浏览器，对默认的margin和padding解析方式不一样
解决方案:
body{
　　margin:0px;
　　 padding:0px;
}
二、居中布局
ff,chrome....经过 margin:auto方式完成块级元素居中显示
ie6及如下，主要经过 text-align:center;方式完成全部元素的居中(包含块级)
body{
　　 margin:auto;
　　text-align:center;
}
三、元素高度与内容
内容高度超出定义高度后，ie6，自适应，其余浏览器，溢出。
解决方案:
overflow属性;
四、子元素设置上外边距时对父元素的影响
解决方案：
(1)、父元素 加 border
(2)、设置父元素的padding-top取代子元素的margin-top

　　(3)、参见个人博客中的相关文章有介绍更多方法。

3、CSS3浏览器前缀

咱们在用到css3的一些属性时，为了达到浏览器的兼容性，一般会加一些前缀，好比：-webkit-, -ms-等等。

这些前缀实际上是浏览器的私有属性。

//浏览器前缀: -webkit-transform: translateX(x) //Safari and Chrome -o-transform: translateX(x) //Opera -moz-transform: translateX(x) //Firefox -ms-transform: translateX(x) //IE