关于css在IE浏览器以及其他各大浏览器的一些兼容问题

要说各大浏览器兼容问题，首先说一下各大浏览器的内核是不足为过的

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

首先在IE浏览器下，ie8版本可谓是一个很大的分界点，它既不支持CSS3也不支持HTML5的属性。

在标准的盒子模型中（ie8 以上的版本中），宽度和高度指的是 content部分；

但是在ie8以下的版本中，宽度和高度具体指  content  +  padding  +  border 三部分；
所以需要注意低版本的ie中盒子模型下的元素的宽高问题；
按照正常来讲，这将是一个宽高均为200像素，边框为3像素的盒子。但是IE盒子模型不会这样认为，IE盒子模型的宽度和高度是包括了边框的宽高的。


ie盒模型的bug问题
换句话来说就是，

IE盒子模型的宽度为:200px + 3px + 3px (200盒子宽度 + 3px左边框宽度 + 3px右边框宽度)

就是外加，会改变原本盒模型的宽高，可以用box-sizing属性

标准盒子模型的宽度为:200px(194px内容宽度 + 3px左边框宽度 + 3px右边框宽度)

针对这样的情况，我们如何来选择“盒子模型”呢,选择一个正确的盒子模型。

IE的盒子模型可以说是IE的一个BUG，我们应该采用标准的盒子模型进行布局，我们在HTML文档的DOCTYPE声明中添加一段声明。(如果不添加这段声明，IE就会按照它所理解的模型进行处理，而FF浏览器就会按照标准盒子模型进行处理，这样不同浏览器的使用者访问网页的效果就会不同。相反，如果加上声明，所有浏览器都会按照标准盒子模型去处理，不同浏览器的使用的访问网页的效果也就一致了。)


2.最被痛恨的：double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案：给浮动容器定义display:inline。

3.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-botto
m:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。

解决方案：外层元素设定border 或设定float。

4. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。

解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

5.img 下的留白，大家看这段代码有啥问题：
<div>
<img src=”" mce_src=”" />
</div>
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定display:block。

6.position：定位的兼容问题

1、div的position使用relative的时候，是基于前一个元素（同级），而不是基于父节点，这与我原先的想法是不一致的。

2、使用relative在IE7下表现良好，但是在IE8/FF/Chrome下居然会直接影响到父节点的下一个兄弟元素，具体表现就是会将下一个元素向下推，导致div中有空隙（大小估计取决于使用relative的元素大小和多少），所以relative模式使用需要谨慎



DIV中的Table

IE7下表现良好，IE8/FF/Chrome就会在div的上边缘和table之间有一个5px左右的空隙，不同的是IE8下无法调整，margin失效。。=_=!，FF/Chrome可以使用margin来定位，但是又会造成IE7下显示错误，目前没有找到替换或解决方案（包括Hack）



td中的div

这个在IE8/FF/Chrome下表现良好，table的边缘和td贴合紧密，margin使用正常，但是在IE6/IE7下会导致td的大小根本无法准确定义（会挤得变形），而且最致命的是当td中含有过大的元素，如div或是input，宽度超过一定比例（比如95%）时，会导致td的左边绘制错误（估计是计算屏幕更新区的BUG），这一点在table中td在自动调整后尤为明显
、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式 
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。 
现在写一个CSS可以这样： 

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

CSS3中的一些属性的兼容问题

总得一句话就是ie8一下不要用CSS3和HTML5的属性就行的，其他的就大可不必要了