頁面佈局常見的兼容性問題和解決方法（4月13號面試-上海天正面試題）

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

一 、不一樣瀏覽器margin和padding不一樣

解決方案：CSS裏    *{margin:0;padding:0;}，這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的margin，padding值爲0；

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

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

3、塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大（即雙倍邊距bug） 

問題症狀：常見症狀是IE6中後面的一塊被頂到下一行

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性

4、設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度 

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

解決方案：給超出高度的標籤設置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:table。圖片默認有間距 

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。使用float是正道。標籤最低高度設置min-height不兼容 

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。