关于浏览器兼容性的各种解决方案

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


浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：css里*{margin:0;padding:0;} 但这种解决办法随着火狐浏览器的升级，产生了一些弊端，
所以已不建议这样用，更好的解决办法是把在页面中用到的标签都写在css的上边，设置它们的margin和padding值都为零，
例如：div,span,p,h1,h2,h3......{margin:0;padding:0;}。
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。






浏览器兼容问题二：块属性标签float后,又有横向的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，
横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。




浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。
即使你的标签是空的，这个标签的高度还是会达到默认的行高。






浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
问题症状：ie6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。
在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug.
不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。
这时候我们还需要在display:inline后面加入display:talbe。



浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，
但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
（使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止使用）



浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。
容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。


浏览器兼容问题七：ie6在父标签float 子标签block的时候默认满屏的问题
解决方案：子标签也float.
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。
建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。




浏览器内核解析问题：<meta http-equiv="X-UA-Compatible" content="IE=8">

---

 

点关注，不迷路

文章每周持续更新，可以微信搜索「 十分钟学编程 」第一时间阅读和催更，如果这个文章写得还不错，觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️ 
各位的支持和认可，就是我创作的最大动力，我们下篇文章见！