前端常見瀏覽器兼容性問題

一、不一樣瀏覽器的標籤默認的外補丁( margin )和內補丁(padding)不一樣
解決方案： css 裏增長通配符 * { margin: 0; padding: 0; }

二、IE6雙邊距問題；在 IE6中設置了float , 同時又設置margin , 就會出現邊距問題
解決方案：設置display:inline;

三、當標籤的高度設置小於10px，在IE六、IE7中會超出本身設置的高度
解決方案：超出高度的標籤設置overflow:hidden,或者設置line-height的值小於你的設置高度

四、圖片默認有間距
解決方案：使用float 爲img 佈局

五、IE9一下瀏覽器不能使用opacity
解決方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

六、邊距重疊問題；當相鄰兩個元素都設置了margin 邊距時，margin 將取最大值，捨棄最小值；
解決方案：爲了避免讓邊重疊，能夠給子元素增長一個父級元素，並設置父級元素爲overflow:hidden；

七、cursor:hand 顯示手型在safari 上不支持
解決方案：統一使用 cursor:pointer

八、兩個塊級元素，父元素設置了overflow:auto；子元素設置了position:relative ;且高度大於父元素，在IE六、IE7會被隱藏而不是溢出；
解決方案：父級元素設置position:relative
————————————————
版權聲明：本文爲CSDN博主「yinol」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/wanmeiyinyue315/article/details/79654984