长沙网站制作_web前端开发的常见浏览器兼容问题和解决方法

发布日期:2016-07-12 08:58

浏览器兼容性问题,就是指因为不同浏览器对同一段代码的解析不同,从而造成了页面显示效果不统一的情况,而我们的要求是无论用户用什么样的浏览器查看网站或者登陆系统,都应该是统一的显示效果。所以说浏览器的兼容性问题是前端开发人员经常碰到的也是必须要解决的问题。下面由长沙蒲公英来说一下一些常见的问题以及解决办法。

1、不同浏览器的标签默认的外补丁和内补丁不同。

问题症状:在不加任何样式的情况下,随便写几个标签,不同浏览器显示的margin值和padding值差异较大。

解决方法:在CSS的全局样式中定义*{margin:0;padding:0;}(*为通配符)

2、图片默认有间距

问题症状:几个img标签放在一起的时候,有的浏览器里会出现默认的间距,加了通配符也没有用。

解决方法:使用float属性为img布局。因为img标签是行内属性标签,只要不超出窗口宽度,img标签都会排在一行里,但部分浏览器的imf标签之间会有间距,所以使用float去掉这个间距。

3、标签最底高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的CSS属性,所以使用时不能很好的被各个浏览器所兼容。

解决方法:如果我们需要设置一个标签的最小高度为200px,需要进行的设置为:{min-height:200px;height:uto !important;height:200px;overflow:visible;}

4、透明度的兼容问题

问题症状:当图片或者某个DIV在显示时需要有一定透明度时,在CSS样式中添加了opacity:0.8属性,但是在IE8以下的浏览器下面却无法显示。

解决方法:IE8以及更早的版本仅支持替代的filter属性。例如:filter:Alpha(opacity=50);这样一来在IE8及更早的版本才会识别。更全面一点的就是opacity:0.8;filter: "alpha(opacity=80)";   /* IE 8 */ filter: alpha(opacity=80);  /* IE 4-7 */ zoom: 1;

以上信息由长沙网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为