1、浏覽器相容的前提是養成好的網頁開發習慣：
本人在做了幾個月的前端浏覽器相容問題上，經常出現的不相容是标記寫法錯誤或簡略導緻的。例如Div的寫法，一定要遵循好的習慣。
推薦寫法：
<div></div>
不推薦的寫法：
<div/>
2、Div中的文字在不同浏覽器下換行問題
設定 style="white-space:normal;word- break : break -all;overflow:hidden; " 3、!important不同浏覽器屬性寬度不一樣.
IE7本身支援!important,針對不同浏覽器高度、寬度、内外邊距問題可采用如下方法解決
.button-gap{
margin-right: 0px!imprtant; /*ie7及firefox支援*/
margin-right: 4px;/*ie6支援*/
} 4、*html和*+html問題
*+html 與 *html 是IE特有的标簽, firefox 暫不支援.而*+html 又為 IE7特有标簽.
代碼:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
</style>
注意:
*+html 對IE7的相容 必須保證HTML頂部有如下聲明：
代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5、height屬性問題
第一個相容，IE FF 所有浏覽器 公用（其實也不算是相容）
height:100px;
第二個相容 IE6專用
_height:100px;
第三個相容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;
在FF下，第2、3個屬性FF不認識，是以它讀的是 height:100px;
在IE7下，第三個屬性IE7不認識，是以它讀第1、2個屬性，又因為第二個屬性覆寫了第一個屬性，是以IE7最終讀出的是第2個屬性 *height:120px;
在IE6下，三個屬性IE6都認識，是以三個屬性都可以讀取，又因為第三個屬性覆寫掉前2個屬性，是以IE6最終讀取的是第三個屬性。
6、Div設定padding問題
IE在解析padding的時候認為padding是在寬度裡面縮進，而firefox則認為是在寬度外邊縮進，是以下面是兩個等價的css設定。
IE下：
.i-div{width:800px;padding-left:12px;padding-right:12px;height:500px}
等同于火狐下的：
Div中不包含其他元素作為站位符使用的時候,如果該DIV隻是空的占位符,且高度小于12px時,ie解析錯位,因為IE預設認為是12px,解決方法是加入lineheight屬性高度等于height,同時font-size:0px;這樣在IE下才不會解析錯位。
.i-div{ height:6px;width:20px;}
要在ie下相容，應該為
.i-div{height:6px;line-height:6px;font-size:0px}
.i-div{width:776px;padding-left:12px;padding-right:12px;height:500px}
為了相容兩個浏覽器，可采用如下方法：
.i-div{width:776px!important;width:800px;padding-left:12px;padding-right:12px;height:500px}
注意：順序一定不能變。火狐會取前者，而IE7兩者都識别，最終取後者，其他IE識别後者。
7、關于空的DIV站位問題
如果DIV隻是空的占位符,且高度小于12px時,ie在解析時,它預設是12px,解決方法是加入lineheight屬性高度等于height,同時font-size:0px;這樣在ie下才不會解析錯位.
.i-div{ height:6px;width:20px;}
要在ie下相容，應該為
.i-div{height:6px;line-height:6px;font-size:0px}
8、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自适應.防止頁面内容超過Div高度而是div撐開，同時，注意Div内部Div要自适應高度則需要設定overflow: auto
9、對齊問題
（1）DIV中文字的垂直居中問題
設定vertical-align:middle;同時設定 line-height屬性等于DIV的高度（不能換行）
（2）DIV水準居中問題
設定DIV的父容器style為text-align:center，然後将DIV的屬性設定如下即可：
margin-left:auto; margin-right:auto;
10、圖檔的背景的平鋪控制
1、隻平鋪一次
background-repeat:no-repeat;
2、水準平鋪一次
background-repeat:repeat-x;
1、垂直平鋪一次
background-repeat:repeat-y; 11、段首縮進設定
Text-indent:2em; //em 字型的高度 12、字間距的調整
letter-spacing屬性用于設定字型間的距離，負值表示縮小，正值表示增大。
對于英文，通過word-spacing屬性可以設定單詞間的距離。 13、僞類的順序：LVHA（link，visited、hover、active）順序，違反該順序，浏覽器有些效果不支援。
14、文字和圖檔對齊
1、設定文字的外部屬性valign為middle，或設定css樣式中的text-align屬性為middle（兩個是等價的）
2、設定img元素的align屬性值為absmiddle即可。 15.float屬性帶來的一些列問題
(1)、margin加倍的問題
設定為float的div在ie下設定的margin會加倍。解決方案是在這個div裡面加上 display:inline;樣式如下：
#IamFloat{
float:left;
margin:5px;/*IE下了解為10px*/
display:inline;/*IE下再了解為5px*/
}
(2)、
<#div id=”floatA” >
<#div id=”floatB” >
<#div id=” NOTfloatC” >
已知floatA、floatB設定了float：left屬性，要求NOTfloatC不是水準排列，而是向下排列時，需要在<#div id=”floatB” >和<#div id=” NOTfloatC” >添加一個div，設定其class屬性為：clear:both;即可。
(3)、作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動适應，要在wrapper裡面加上overflow:hidden;
當包含float的
box的時候，高度自動适應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。
例如某一個wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px
auto;}
(4)、對于排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:
<div id=”page”> <div id=”left”></div> <div
id=”center”></div> <div id=”right”></div>
</div> 比如我們要将page的背景設定成藍色,以達到所有三欄的背景顔色是藍色的目的,但是我們會發現随着left
center right的向下拉長,而
page居然儲存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設定成float,是以我們應該這樣解決
<div id=”page”> <div id=”bg”
style=”float:left;width:100%;background-color: #99CCCC”> <div id=”left”></div>
<div id=”center”></div> <div id=”right”></div>
</div> </div> 再嵌入一個float left而寬度是100%的DIV解決之
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)