浏览器兼容性问题

[FanWalker]

今天去参加4399的面试，提到了浏览器兼容的问题，虽然平时有去了解，但自己没有去总结过，所以也答的没有逻辑，所以这里就来总结一下：

一、不同浏览器的默认标签的margin和padding不同

描述： 在标签不加样式的情况下，不同浏览器的默认margin和padding有差异。

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

二、块属性标签float后，加上水平方向的margin的情况下，IE6显示margin比设置的大

描述： 常见的症状是在IE6下，最后面的一块会被挤到下一行；

解决方案：在设置了float的标签样式中，在设置display: inline，将其转化为行内属性。

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

描述： IE6，IE7和遨游中这个标签的高度不受控制，超出自己设置的高度；

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

备注：一般出现在设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度，即使标签是空的，这个标签的高度还是会达到默认的行高。

四、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug。

描述： IE6里的间距比超过设置的间距；

解决方案：在display:block;后面加入display:inline;display:table；

备注： 行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

五、图片默认有间距

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

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

（持续更新中、、、）