“约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案（建议收藏）

CSS常见兼容性问题及解决方案：

1. 上下margin重合问题：

问题描述：相邻的margin-left和margin-right是不会重合的，但是相邻的块级元素margin-top 和margin-bottom会产生重合。

解决方案：统一设置margin-top或者 Marin-bottom，不要混合使用。

2.超链接访问后，hover样式不显示：

问题描述：同时设置a:visited和a:hover样式后，超链接访问后，hover的样式不显示，

问题原因：标签中的样式顺序出现了错误。

解决方案：将他们的样式排序为 a:link , a:visited , a:hover , a:active .

3.行内元素上下margin及padding不拉开元素间距的问题：

问题描述：行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

解决方案：将行内元素display设置为block即可解决

4.不同浏览器的标签默认的外间距和内间距不同

问题描述：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：在CSS文件开头用通配符*来设置各个标签的内外边距是0。

*

{

margin: 0px;

padding:0px;

}

5.ul在浏览器中不同表现，具有默认边距在不同浏览器中显示的位置不同：

问题描述：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。

解决方案：设置其属性 padding：0px ; Margin : 0px;

6.按钮默认大小不一：

问题描述：不同浏览器的默认按钮大小可能不同。

解决方案：用a标签来模拟按钮，添加样式；如果按钮是一张背景图片，那么直接给按钮添加背景图；

7.图片间默认又间距问题：

问题描述：几个img标签（行内标签）放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

8.双倍浮动问题：

问题描述：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大。

解决方案：给float标签添加display：inline，将其转换为行内元素

9.设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度

问题描述：IE8之前的浏览器都会给标签一个最小默认的行高的高度，一般会出现在设置小圆角背景标签里。

解决方案：给容器添加overflow：hidden；或者设置行高line-height 小于你设置的高度。

10.容器不扩展问题：

问题描述：div嵌套结构中，外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。

问题原因：因为当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。

解决问题：在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）