常見瀏覽器兼容性問題及解決辦法總結

 

1. 不一樣瀏覽器的標籤默認的外補丁( margin )和內補丁(padding)不一樣；

解決辦法：在CSS文件開頭，加*{margin: 0; padding: 0;}，把全部標籤的margin和padding設置爲0便可。

 

2. 在IE6中，塊元素設置float而且有水平方向的margin時，margin顯示出來會比設置的值大，會致使最後一塊元素被頂到下面去；

解決辦法：能夠將塊級元素display設置爲inline。

 

3. 在IE6，IE7等瀏覽器，標籤高度小於10px時，實際的高度會超出設置的高度，這是由於瀏覽器給標籤設置了一個默認的最小高度；

解決辦法：設置{overflow: hidden;}，或者設置line-height小於你設置的高度。

 

4. 在某些瀏覽器中，圖片有默認的間距(全部有文字屬性的標籤都會有邊距，除非兩個標籤連在一塊兒沒有隔開)；

解決辦法：使用float爲img佈局，由於全部標籤設置float以後都會變成塊級元素，塊級元素浮動時會緊挨在一塊兒，沒有邊距；此外能夠讓HTML的img標籤緊挨在一塊兒，不要隔開，可是會影響HTML文檔的結構，不太美觀。

 

5. 標籤最低高度設置min-height不兼容問題；

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

 

6. IE9如下瀏覽器不能使用opacity；

解決辦法：{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

 

7.兩個塊級元素，父元素設置了overflow:auto，子元素設置了position:relative ，且高度大於父元素，在IE六、IE7會被隱藏而不是溢出；

解決辦法：父級元素設置position:relative。