1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同

解決：*{margin：0；padding:0}

2.IE6不支持圓角

解決：用圖片代替

3.在IE下img外邊加了a鏈接后產(chǎn)生難看的藍(lán)色邊框

解決：img{border:0}

4.IE6下給塊屬性標(biāo)簽float后，又添加的指定margin-left的時(shí)候，IE6出現(xiàn)雙倍邊距

解決：給浮動元素加display:inline，轉(zhuǎn)為行元素

5.div包含一張圖片，底部可能有2px 4px或更多的間隙

原因：因?yàn)榻odiv加font-size會影響間隙的大小
解決：
1.將圖片對齊方式改為vertical-align，值為top或bottom
2.將圖片轉(zhuǎn)為塊元素display:block
3.將父元素的字體大小設(shè)為0，font-size:0;

6.幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會有默認(rèn)間距

解決:給img加float

7.子元素的margin-top:20px沒有加到指定元素上

解決：
1.給父元素加透明邊框：border:1px solid transparent;
2.給父元素加padding-top：20px，同時(shí)父元素的高度減去20px
3.通過給父元素加overflow:hidden

8.IE6下浮動塊元素與未浮動塊元素處于同一行，有默認(rèn)的3px間距。

解決：設(shè)置非浮動元素浮動

9.IE6下行元素轉(zhuǎn)為塊元素，高度超出

解決：給元素加overflow:hidden

10.子元素里加float,如果父元素沒有給定高度，子元素?fù)尾黄鸶冈?/h3>

解決：
1.父元素結(jié)束前加<div style="clear:both"></div>或者
.clearfix:after {
content: ‘.’;
height: 0;
display: block;
clear: both;
}
2.給父元素也加float:left
3.子元素去掉浮動加float:none
4.給父元素加overflow:hidden或overflow:auto;
原理：浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
塊級格式化上下文

關(guān)于BFC
定義：BFC（Block Formatting Context）全稱是塊級格式化上下文，用于對塊級元素排版，默認(rèn)情況下只有根元素（body）一個(gè)塊級上下文，但是如果一個(gè)塊級元素設(shè)置了float:left,overflow值不為 visible 或position:absolute或fixed樣式，就會為這個(gè)塊級元素生產(chǎn)一個(gè)獨(dú)立的塊級上下文，使這個(gè)塊級元素內(nèi)部的排版完全獨(dú)立。
作用：獨(dú)立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，就是說包含塊會把浮動元素的高度也計(jì)算在內(nèi)，所以就不用清除浮動來撐起包含塊的高度。

11.IE6不支持透明rgba與opacity

解決:{
opacity:0.6;
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
}

12.IE6不支持min-height,max-height

解決：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{
min-height:200px;
height:auto !ImportAnt; // 使用ie6不支持但其余瀏覽器支持的屬性!important。
height:200px; // IE6下內(nèi)容高度超過會自動擴(kuò)展高度
overflow:visible;}

13.IE6中，!important不起作用

解決：單獨(dú)設(shè)置

總結(jié)

以上是生活随笔為你收集整理的浏览器兼容问题总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。