前端頁面相容問題主要表現在我們所做的頁面在不同瀏覽器顯示會有所不同，目前主要的相容性問題比較多的是IE6和IE7,另外針對html5和css3新標籤，比如css3動畫，媒體查詢，畫布，視訊等暫時不做討論，下面就針對常見的相容性問題做下總結。

一 、不同瀏覽器margin和padding不同，這個一般都會遇到

解決方法：*{margin：0；padding：0} 統一格式

二 、ie6中，父級元素浮動以後，內部元素內容撐不開寬度

解決方法：元素內部的塊級元素也設定浮動

程式碼如下：

html：

<div class="box">
<div class="left">
<h3>左側</h3>
</div>
<div class="right">
<h3>右側</h3>
</div>
</div>

css：

.box {
width:400px;
}
.left {
background: red;
float:left;
}
.right{
background: yellow;
float:right;
}
h3{
margin:0;
float:left;/*此處設定浮動，如果不設定，內容撐不來寬度*/

}

三、標籤巢狀不規範，如p和h1-h5裡面巢狀div

解決方法：請正確的巢狀元素標籤

程式碼如下：

html：

 <h2>

/* 內部巢狀不合理*/
<div>

</div>
</h2>

css：

h2 {
width:100px;
height:100px;
background: red;
}

四、ie6小於19px，會當成19px處理，也就元素寬高小於19px的bug

解決方法：overflow:hidden;

程式碼如下：

html：

<div class="box"></div>

css：

.box {
height:1px;
background: red;
overflow: hidden;/*此處如果沒有這個，會預設19px*/
}

五、在IE6下不支援1px的dotted邊框樣式

解決方法：可以採取切背景平鋪的方法

六、在IE6和IE7下父級有邊框的時候，子元素的margin會失效

解決方法：觸發haslayout，父級元素設定zoom：1；

程式碼如下：

html：

<div class="box">
<div class="div"></div>
</div>

css：

.box {
background: red;
border: 1px solid black;
zoom:1;/*此處不設定，margin無效*/
}
.div {
width:200px;
height:200px;
background: blue;
margin:100px;
}

七、浮動後的元素在ie6下出現橫向的雙邊距bug

解決方法給元素新增display：inline；

程式碼如下：

html：

<div class="box"></div>；

css：

.box {
width:100px;
height: 100px;
background: red;
float:left;
margin:100px;
display: inline;/*此處不新增會出現雙邊距bug*/
}

八、多列均分（border相容問題和計算數值問題）

解決方法：在計算數值的時候一定要準確，不然的話相容ie的時候佈局非常麻煩，另外border這個也會出現一定問題，ie有些低版本的瀏覽器的內容部分包含border，其他瀏覽器不包含

程式碼如下：

html：

<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

css：

*{margin:0 ;padding:0 ;}

.box {
width:480px ;

/*1、注意這個是沒有邊框的情況下數值是width+margin*8（八個左右邊距），如果不準確的話 ，ie瀏覽器會出現很多問題

        因為當一行子級元素寬度之和和父級的寬度相差超過3px，或者子級元素不滿行的情況的時候，最後一行的子級元素的                   margin-bottom會失效

   2、有邊框的情況下數值在常規瀏覽器下是width+margin*8（八個左右邊距）+border（八個邊框）

       ie7中width+margin*8（八個左右邊距）+border（八個邊框）另外底部需要用hack 設定padding-bottom的值

       ie5和ie6中width+margin*8（八個左右邊距）

                                                                    */

background: black;
overflow: hidden;/*清除浮動*/
}
.box div {
width: 100px;
height: 100px;
background: red;
margin: 10px;
/*border:5px solid blue; 此處我給註釋啦，如果需要邊框自己測試下*/ 
float:left;
display: inline;/*此處處理雙邊距bug問題*/
}

九、在IE6,7下，li本身沒有浮動，li裡面的元素有浮動，li下出現間隙的問題

解決方法：常規下給li加vertical-align:top 如果最下間隙和最小高度bug共存的時候，利用hack給li新增浮動；

十、在IE6下，當浮動元素和絕對定位元素是兄弟關係的時候，絕對定位會失效

解決方法：不讓浮動元素和絕對定位元素是兄弟關係，用div或者其他標籤把子標籤包起來

十一：在IE6.7下，子級元素有相對定位，父級overflow包不住子級元素

解決方法：給父級也加相對定位

十二：在IE6下，如果絕對定位的父級寬高是奇數的時候，子級元素的right和bottom值會有1px的偏差

解決方法：儘量將父級寬高設定非奇數

十三：ie相關瀏覽器的透明度相容問題

解決方法：給元素設定filter:alpha(opacity=50);

程式碼如下：

html：

<div class="box"></div>

css：

body {
height: 2000px;
background: red;
}
.box {
width:200px;
height: 200px;
background: yellow;
position: fixed;
top:30px;
left:100px;
opacity: 0.5;
filter:alpha(opacity=50);/*此處解決透明度問題*/

}

十四：在IE6.7下 輸入型的表單標籤控制元件上下會有1px的間隙。
解決方法：給input加浮動

程式碼如下：

html：

<div class="box">
<input type="text">
</div>

css：

.box {
width:200px;
height:32px;
border:1px solid #000;
}
input {
width:100px;
height:30px;
border:1px solid blue;
margin:0;
padding:0;
float:left;
}

十五：行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，ie6間距bug，這個和上面那個有點類似

解決方法：在display:block;後面加入display:inline;display:table;

十六：圖片佈局的問題，在佈局的時候有的瀏覽器會出現間距

解決方法：使用 float浮動

十七、使用ie下判斷ie的版本語句相容

解決方法：<!--[if ie]>
我是IE
<![endif]-->

<!--[if ie 6]>
我是IE6
<![endif]-->


<!--[if ie 7]>
我是IE7
<![endif]-->


<!--[if ie 8]>
我是IE8
<![endif]-->

十八、hack方法相容

解決方法：這個hack語句比較多，就簡單的列舉幾個

css hack:
\9 ie10之前的ie瀏覽器解析的程式碼
+或者* 表示ie7包括7之前的ie瀏覽器
_表示 ie6包括6之前的ie瀏覽器

總結：以上列舉的一些常見的相容方法，相容方面主要是IE瀏覽器的相容，據不完全統計現在很多企業和單位前端頁面要求在IE8以上的居多，當然也有全部都要相容的，比如政府和銀行金融等，隨著網際網路大環境的影響和新標籤新屬性的不斷產生，相信相容問題會朝著一個好的方向發展。