常见浏览器兼容性问题与解决方案

转至：http://blog.csdn.net/onlycat006/article/details/78510074

在前端开发中我们将会遇到关于浏览器的兼容的难题，以下是本小菜按个人思路还有自己的知识基础总结并参考几位专业大师级然后做的关于常见浏览器兼容性问题的原因和方法还有概括，方便以后的前端开发更好的学习：

首先我们知道浏览器的兼容性的概念

1.浏览器兼容性是什么意思？

浏览器兼容性问题，在各个浏览器之间的大战中，基本上每个浏览器用的命名规范不一样，因此不同的浏览器对同一段代码有着不同的解析，也就会出现页面显示效果不一样。

简单而言就是：网页在IE6浏览器中打开很正常，但是在IE8版本里面打开可能变形了一系列的样式不管用。

2.为什么我们要去解决浏览器的兼容性问题？

在大多数情况下各个用户的浏览器以及浏览器版本不一，而我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

3.我们如何去解决浏览器的兼容性问题*？

浏览器兼容问题一：不同浏览器的标签默认的 内padding，外margin 边距不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大，所以在页面中边距就不一样大。

碰到频率:100%

解决方案：在CSS用通配符中初始化    *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外边距是0。

浏览器兼容问题二 IE6/IE7对display：inline-block的支持还欠缺

问题症状：在设置导航栏通常会用到<ul><li>标签用display：inlin

流浏览器和IE6/7都兼容。



浏览器兼容问题三：设置较小高度标签（一般小于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。
dbc0
不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

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



备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

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

/* CSS hack*/
1.什么是css Hack?
  由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏
览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们
把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理

2.css hack 的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景
来应用不同的CSS。

3.CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针
对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但
firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对
IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。
 3、HTML头部引用Hack
      通过 IE 的条件注释 来完成的
      条件注释：
        与html注释相似<!-- -->
    if条件判断是否能够解析注释里的内容

    gt : 选择条件版本以上的版本(不包含条件版本)
         gt ie 7
    lt : 选择条件版本以下的版本(不包含条件版本)
         lt ie 8
    gte :选择条件版本以及以上版本
         gte ie 7
    lte :
    ! :选择条件版本意外的所有版本
        ! ie6
    
        <!--[if 条件]>
      满足条件要做的事情
    <![endif]-->

       1、通过条件注释声明，只在IE下生效         <!--[if ie]>       这段文本只在ie中显示     <![endif]-->       2、只在ie6以上的浏览器生效         <!--[if gt IE 6]>             <![endif]-->       3、在IE8上不生效         <!--[if ! IE 8]>      +css引入地址
    <![endif]--> IE所有的css hack 由于所有的IE浏览器都能够识别特定的css属性值后缀\9，因此我们可以给css的属性值添加\9后缀(在结尾的分号之前)，从而做到只有IE浏览器能够识别 该属性，其他浏览器无法识别从而将其忽略掉。 比如：.css-hack {     color: red\9; /* 所有浏览器上显示为红色 */      } 

IE浏览器不同版本的特殊符号总结：

* 或 # ，IE7、IE11 支持。
     \9 ，IE8、IE9、IE11 支持。

     \0 ，IE8、IE9 支持。

      *、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。

具体兼容性问题相关文章链接：

WEB前端浏览器不兼容导致的问题及解决方案

【web前端开发】浏览器兼容性处理大全

前端开发中常遇到的浏览器兼容问题小结

史上最全的CSS hack方式一览