关于浏览器兼容性问题

关于浏览器兼容性问题

制作网页时总会遇到各种浏览器的兼容性问题，工作也有一段时间了，做了一点小总结希望分享给大家，共同进步。

1、float定位。

Float定位是css排版中的非常重要的手段，属性float值：left、right、none（默认值），当设定了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。

在用float的同时我们要注意到

（1）float元素的父元素不能指定clear属性。

这是因为MaeIE下如果对float的元素父元素使用clear属性，周围的float元素布局就会混乱。

（2）float元素无比知道那个width属性

很多浏览器在显示未指定width的float元素时会有bug，所以不管float元素的内容如何，一定要为其制定width属性。（注意：制定元素时尽量使用em而不是px）（3）float元素不能指定margin和padding的属性

ie在显示指定了margin和padding的float元素时有bug。你可以再float元素内部嵌套一个div来势之margin和padding，也可以使用hack方法为ie指定特定的值。

（4）float元素之核的宽度要小于100%

如果float元素的宽度和正好等于100%，为保证大多浏览器显示正常，要是宽度之和小于100

2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

3、ie6中莫名出现多余的字符

我遇到的现象是：ie6下有些问题，重复出现在第二行，就是某些段落或某些文字的末尾N个字符，他另起一行重复出现，在选选着重复出现的文字时，原有的文字也被选中

解决方法：很简单，在重复出现文字的末尾补N个 ；就可以。

4、ie7中正常，但ie8中不正常，div的位置position：absolute在ie8中不起作用

解决方法：设置html兼容ie7，在head下加

content=”ie=7”>

5、针对ie

6、ie

7、火狐浏览器

(1)Ie6 、FF对!important;测试正常

Ie7对!important;可以正确解释。

为了使他们都正常：

#style1{color：#333；} FF正常显示#333；

*html #style1{color：#666；} ie6显示#666

*+html #style1{color：#999；} ie7显示#999

*+html与*html是ie特有的标签，firefox暂不支持，而*+html又为ie7特有的标签。

注意：顺序不能错了。

(2)FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。

参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height,

可以在menubar 中插入一个空格。

(3)在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

(4)IE5 和IE6的BOX解释不一致

IE5下

div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

注释：这个问题是看别人写的觉得不错就记下来了，但关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！

太晚了，要睡觉了，就先写这些吧，有时间会继续补充的。