关于浏览器兼容性问题

                    转自百度文库： 关于浏览器兼容性问题

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

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个&nbsp；就可以。

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

解决方法：设置html兼容ie7，在head下加<meta  http-equiv=”x-ua-compatible”content=”ie=7”>

5、针对ie6、ie7、火狐浏览器

(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}