Web前端浏览器兼容问题

Posted 2021-04-30 web前端网页设计

点击上方「web前端网页设计」一键关注，更多网页设计 UI设计 html div css HTML5+CSS3、javascript、JQuery，php、mysql、帝国CMS建站教程尽在掌握。

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

常见的浏览器兼容问题有以下内容：

问题1：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题描述：块状元素被添加float属性后，在IE6显示横行margin值加倍。

解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。

问题2：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题描述：IE6、7和遨游里标签的高度不受控制，原因是超出自己设置的高度

解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

问题3：：图片默认有间距

问题描述：因为在多个img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。

解决方法：使用float进行浮动。

问题4：Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果

问题描述：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容IE6、7和遨游里标签的高度不受控制，原因是超出自己设置的高度

解决方法：有以下两种解决方法

第一种：

1 .abc{ 2 border:1px blue solid; 3 width:200px; 4 height:200px; 5 } 6 7 html>body .abc{ 8 width:auto; 9 height:auto; 10 min-width:200px; 11 min-height:200px; 12 }

第二种：

1 .abc{ 2 width:200px; 3 height:200px; 4 _width:200px; 5 _height:200px; 6 }

问题5：不同浏览器默认的margin值和padding值不同

问题描述：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方法：在CSS中使用通配符选择器重置样式

1 *{ 2 margin:0; 3 padding:0; 4 }

声明：本文章来自互联网分享如涉及到版权问题请联系客服处理谢谢！

点击“阅读全文”，加入交流学习群