浏览器的一些兼容性问题

各大浏览器所用内核

常见兼容性问题

1. 不同浏览器的标签默认外边距和内边距不同

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

2. IE6双倍边距问题，在IE6中设置了float，同时又设置margin，就会出现双倍边距问题。

   <div id="app">
     <div class="box1"></div>
     <div class="box2"></div>
     <div class="box3"></div>
   </div>
   

   #app div {
     float: left;
     margin-left: 20px;
   }
   

   

   解决方案：{_display: inline;}

3. IE6以下不支持选择器> + ~ 属性选择器等

   解决方案：不用这些选择器

4. IE6及以下overflow: hidden不能清除浮动

   解决方案：{overflow: hidden; _zoom: 1;}

5. IE6及以下元素无法设置小于15或20的高度

   bug分析：IE6及以下元素在同时设置height和line-height时，浏览器认为height不能比line-height小，而当元素里有内容时会有一个默认行高(大概比文字高一点)，所以height设置比line-height更小是无效的。当元素里没有内容时元素始终不能小于20px，无论更改高度还是行高（我不知道原因）。

   解决方案：元素有内容时设置line-height或font-size小于或等于height，或者{overflow: hidden;}。无内容时{overflow: hidden;}

6. 两个内联元素、行内块元素之间会有空白，图片元素上下会有空白。

   bug分析：写标签时经常会有换行，这个换行符就是那个空白。（图片上下也会有空白，不知道为啥）

   解决方案：

   • 方案1：在父元素里设置font-size: 0;
   • 方案2：将元素转换为块元素
   • 方案3：写标签时不换行
   • 方案4：将元素转为浮动元素

7. IE9以下不支持opacity

   解决方案：{_filter: alpha(opacity=50);}

8. 块元素垂直方向外边距合并问题

   bug分析：块元素的垂直外边距会发生合并现象

   

   解决方案：三种情况，可以把元素转为行类块、浮动元素、绝对定位元素来取消合并，第三种情况还可以加透明边框取消合并。

9. IE6中父元素设置overflow: auto，当子元素设置position: relative;且高度超出父元素时，会溢出父元素。

   解决方案：在父元素上设置position: relative;

后续添加中。。。