前端浏览器常见兼容性问题及解决方案

目录

1. 最常见的：每个浏览器的默认margin，padding大小都不同，当设置定位时会有些许差异。

 2. 图片默认有间距：当几个img标签放到一起时，有些浏览器会有默认间距，加上第一条的设置的通配符样式也无用。

 3. min-height问题：由于min-height本身就是一个不兼容的css属性，所以设置min-height不能被各个浏览器很好的兼容。

 4. 常见事件兼容性问题解决方案：[答案在这里哦](https://blog.csdn.net/qq_42357338/article/details/108010387)

 5. IE9以下浏览器不能使用opacity

 6. 边距重叠问题：当相邻的两个元素都设置了margin边距时，margin会取最大值，舍弃最小值。

---

1. 最常见的：每个浏览器的默认margin，padding大小都不同，当设置定位时会有些许差异。

解决方案：这也是最容易解决的, 在css样式文件中重置margin，padding

*{
    margin:0;
    padding:0;
}

 2. 图片默认有间距：当几个img标签放到一起时，有些浏览器会有默认间距，加上第一条的设置的通配符样式也无用。

解决方式：使用float属性让其浮动，消除间距

 3. min-height问题：由于min-height本身就是一个不兼容的css属性，所以设置min-height不能被各个浏览器很好的兼容。

 解决方案：如果需要设置一个最小宽度200px，需要进行如下设置：
 

.test{
    min-height:200px;
    height:auto !important;
    height:200px;
    overflow:visible;
}

 4. 常见事件兼容性问题解决方案：答案在这里哦

 5. IE9以下浏览器不能使用opacity

 解决方案：如下

 opacity: 0.5;
 filter: alpha(opacity = 50);
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 6. 边距重叠问题：当相邻的两个元素都设置了margin边距时，margin会取最大值，舍弃最小值。

 解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden