CSS与浏览器兼容性问题

在制作网页的工程中，最难的并不是各种各样的新技术，而是对浏览器的兼容性的处理。所谓CSS样式的兼容性，就是CSS样式在多种浏览器中的显示问题。国内的浏览器很多都是IE的内核，而谷歌的浏览器效果又跟火狐接近，IE8以及以上的版本已经对兼容性做了很大的修改，所以我就以IE6和火狐的区别来讲解

无序列表的兼容性

对于无序列表的特点就是每个列表前都是以黑色圆点作为标示，默认状态下，火狐显示的黑点会比IE6显示的大，解决方法就是：list-style-type:none;然后再设置list-style-image。
此外，当我们为列表项加上属性list-style-type:hiragana;火狐可以正确的识别并显示出日文编号，而IE6则完全忽略了这个样式，仍然显示的默认样式。

浮动在IE6下产生双倍距离

浮动这个属性在网页布局的时候经常使用，但显示效果在火狐和IE6下有些不同，如使用float：left；使盒子浮动在一行上并间距为50px，在浏览器中显示如下：

明显看出IE6最左端出现了双倍距离，解决方法就是：在浮动的

样式中加上display：inline；此样式的作用是使块元素显示为行内元素 ，这样兼容性的问题就解决了。

在IE6中图片下方有空隙产生

在日常的网页制作中，一般来说插入图片的高度会和盒子的高度相同，那样在网页中图片下方才没有空隙，然而在IE6中还是会出现空隙。

这样的结果是由于IE6对图片CSS样式的解释和其他版本的浏览器不同，解决方法只需为img标签设置一个样式即可：display:block;将图片元素显示为块元素。

3像素问题

在网页制作中，经常会遇到左边图片右边文字的布局，如果使用浮动布局的话，在IE6中图像所在的

与右边文字部分的

之间会产生3px的间隙，如图

这样很容易导致后面的元素错位，解决方法： 为两个

分别加上float:left;并取消右侧

的margin-left属性，这样后面的

也会跟着向左浮动，但这样还需要为后面的

添加clear:left;以清除其向左浮动属性。

margin值加倍问题

CSS样式中设置的margin值在IE6中显示时会加倍，很容易显示错位
例如我们建两个

盒子，都给margin：2px；让他们并排显示，显示如下

很明显在IE6中盒子之间会显示双倍margin值，右边的盒子就会被顶下来，解决方法：为第一个盒子添加display:inline;属性（行内显示）。

margin值传递

给子元素加的margin经常会传递给父级

解决方法：1、IE6下给父级边框，margin传递就会消失
2、触发父级的 haslayout

list间隙问题

在IE6、7下list本身没有浮动，但是内容浮动了list下就会出现几px的间隙，解决方法：
1.给li加浮动（比较麻烦）
2.给li加垂直对齐样式 vertical-align:top;

浏览器不能自适应高度

在CSS样式中，当将元素的height值设置成auto时，它会根据自身内容的高度而自动适应高度，很多时候却不起作用，这时候我们需要添加一个属性overflow:hidden;就解决了。

最小高度问题

在IE6下浏览器默认高度为19px,小于19px的都按照19px来处理。
解决方法：加 overflow:hidden；

解决浏览器兼容性问题的小技巧

1.默认情况下IE有margin-left值，约为40px；火狐默认有padding-left值，也约为40px。通常我们使用通用选择器 * 来将网页中所有的元素的外边界、边框和间隙重新定义为0。如下代码：

*{ margin:0;
padding:0;
border:0;
}

2.关于网页居中的问题，IE默认使用text-align属性，值为center;火狐默认使用margin属性，左右边界值为auto。
3.在定义列表项或行文本的高度时，尽量避免使用height,而是用line-height属性间接定义。
4.不出现显示错误的大前提是一定要注意标签正确且完整嵌套。
5.为每个标签完善属性。正是由于浏览器有默认值，为标签写属性的同时，相当于重新定义了默认值，所以可避免一些兼容性问题。

border问题

1px dotted在IE6下不支持
解决方法：切背景平铺。