抑郁症健康,内容丰富有趣,生活中的好帮手!
抑郁症健康 > 前端浏览器常见兼容性问题及解决方案

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

时间:2018-08-28 23:50:16

相关推荐

目录

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

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

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

4. 常见事件兼容性问题解决方案:[答案在这里哦](/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

如果觉得《前端浏览器常见兼容性问题及解决方案》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。