手機端和pc端瀏覽器兼容性問題

1⃣️  如何解決不同瀏覽器的標籤默認的內外補丁的不同;

       解決方法:

                在css裏開頭用通配符來設置內外補丁標籤內外補丁爲0;

2⃣️  塊元素設置float後,又有橫行的margin情況下,在IE6中顯示margin比設置大;

      解決方法:

               在css裏開頭用通配符來設置標籤內外補丁爲0;

3⃣️ 行內元素設置display:block;後採用float佈局,又有橫行的margin的情況;在IE6間距有bug;

       解決方法:

               在display:block後面加入display:inline;display:table;

4⃣️  在設置較小高度標籤(一般小於10p x),在IE6,IE7,遨遊中高度超出自己設置的高度;

        解決方法:

               給超出高度的表籤設置overflow:hidden;

               或者,設置行高小於你設置的高度;

5⃣️  圖片默認有間距,比如幾個img標籤放在一起的時候有些瀏覽器會有默認的間距,用了通配符也不起作用;

        解決方法:

                使用float屬性爲img佈局;

6⃣️ 經常出現的手機端和p c端的 1 像素兼容性問題 ;

     問題症狀:

            pc端1像素在手機端因爲DPI(物理像素是設備像素的2倍,在愛瘋6上)的問題會是pc端的兩倍也就是2px;

   解決方法:

          給父元素增加僞類after,把after設置成一條線,然後在dpi爲2的手機上通過media屬性使用css3的屬性進行縮放

       (簡而言之就是僞類加縮放)

7⃣️ 關於不同屏幕尺寸大小屏幕高度適配問題;

       問題症狀:

     比如在愛瘋6上設置的高度,並且在底部設置了一個按鈕,可是如果切換到愛瘋7或8上 就會出現按鈕不在底部,又或者高度也不夠的情況; 

     解決方法:

          用css3裏的sticky footer

 

 

 

 

 

 

 

 

          

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章