浏览器兼容性问题归纳整理

1.   ie6里面的竖向滚动条失效

ie6里面如果设置元素为横向滚动条隐藏，竖向滚动条显示，如果改原始内有元素设置position:relative;或者position:absolute;样式，那么ie6里面的竖向滚动条就会失效。解决办法：设置该元素为position:relative;top:0;left:0;即可解决此BUG！

2.    ie6,ie7下设置overflow:auto下滚动条不起作用

ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用，但在火狐，ie8，ie9，谷歌等浏览器下正常显示。通过查询终于找到原因，只需要加一个position:relative;属性就能解决问题！

3.    IE6下 Bug overflow:hidden无效解决办法如下：

产生原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。

解决办法：我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。

4.    IE6下div边框显示不完整有残缺

把一个div的border设置为border:1px solid #ccc;的时候，这个DIV作为一个容器，容器里面的内容设置了float属性。在IE6下就一直会有问题，容器的边框在浏览的 时候总有残缺，显示不完整，感觉若隐若现的。但是把鼠标放上去选择下，晃动一下就没有问题，马上就显示完整而没问题了。在IE7和Firefox下都没有问题， 最后终于找到原因，

1.在父元素中加入height:1%
2.给父元素设置一个宽度或高度
3.给父元素设置一个背景色.

5.    列表中li标签设置margin在IE6和IE7中第一个行失效的解决方法

在做列表文章的时候，我们经常会用ul,li标签实现，但是如下图所示第一行出了点问题。在IE6、IE7中li的第一行相对于下方的靠左，而在IE8，FF正常。如下图所示：

静态代码如下：

css代码如下：

 .row2-left{float:left;width:240px; height:200px; border:#CCCCCC 1px solid;}

 .row2-lefth1{background: url(../images/item2.gif) left top no-repeat; padding-left:8px;}

 .row2-leftul{color:#333333; padding-top:5px; }

.row2-left ul li{height:25px;line-height:25px; background:url(../images/arrow.gif) leftno-repeat;padding-left:14px;margin-left:10px;}

 解决方法一：

在ul中加上属性width:240px;

解决方法二：

把li标签中的margin-left:10px;移到ul标签中。

6.    3像素Bug

著名的3像素Bug。你可以给img的css设置display: block;用来去除div下边莫名多出来的3px的像padding-bottom的东西。注:vertical-align: middle; 亦可

7.    IE6/IE7之浮动元素最后一个字母重复Bug

解决方法：

(一)  在我们的浮动元素span上添加position: relative;

(二)  将html注释<!---->换成IE注释 <!--[if!IE]>这里是注释内容[endif]-->   或 注释不放置于 2 个浮动的区块之间。

(三)  在第二个容器后面加一个或者多个<divstyle="clear"></div>来解决

8.    表格内内容超出用省略号显示

1. table-layout:fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）

2. white-space:nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。

3. overflow:hidden 隐藏超出单元格的部分。

4. text-overflow:ellipsis 将被隐藏的那部分用省略号代替。

9.    css hack

.test{

color:#000000;/* FF,OP支持 */

color:#0000FF\9;/* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */

[color:#000000;color:#00FF00;/* SF,CH支持 */

*color:#FFFF00;/* IE7支持 */

_color:#FF0000;/* IE6支持也可以用 - */

}

10. 不同浏览器的标签默认的外补丁和内补丁不同

解决方案：CSS里    *{margin:0;padding:0;}

11. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

12. 标签最低高度设置min-height不兼容

在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}