简单的说一下浏览器兼容问题-前端笔记

为什么会有浏览器兼容问题

浏览器兼容性问题，是指因为不同的浏览器标准不同对同一段代码的解析有差异或者是统一浏览器由于版本的不同，导致支持的特性不一样，造成页面显示效果不一致。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的页面，都应该是统一的效果，所以需要一些方法让他的页面显示效果一致。

部分兼容问题解决方案

问题一：不同浏览器的标签默认的内外边距不同

//解决方案： 
 *{margin:0;padding:0;}

问题二：图片默认有间距

解决方案：使用float属性为img布局（问题一中提到的通配符不起作用）

问题三：li之间有间距

解决方法：li设置vertical-align:middle

问题四：标签最低高度设置min-height不兼容

解决方案：设置一个标签的最小高度200px

p{min-height:200px; 
 height:auto !important; 
 height:200px; 
 overflow:visible;
} 

问题五：ie各个版本的hack

//类内部hack：
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/

//选择器Hack：
*html .header{} /*IE6*/ 
*+html .header{} /*IE7*/ 

问题六：常见属性的兼容情况

• inline-block: >=ie8min-width/min-height: >=ie8:before,:after: >=ie8div:hover: >=ie7inline-block: >=ie8background-size: >=ie9圆角: >= ie9阴影: >= ie9动画/渐变: >= ie10

问题七：clear float

.clearfix:after{
 content: '';
 display: block;
 clear: both;
}
.clearfix{
 *zoom: 1; /* 仅对ie67有效 */
} 

可能用到的技巧和工具

• 条件注释

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

 <!--[if IE 6]>
 <p>You are using Internet Explorer 6.</p>
 <![endif]-->
 <!--[if !IE]><!-->
 <script>alert(1);</script>
 <!--<![endif]-->
 <!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet">
 <![endif]--> 

• IE Hack

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： <!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本：<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

• js 能力检测

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。

 //特性检测
if (object.propertyInQuestion) {
 //使用object.propertyInQuestion
 }

• html5shiv.js

浏览器IE8及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> 
<[endif]–>

• Respond.js

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询兼容响应式布局

• css reset

css reset重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。例如 yui3 reset 中的一段：

ol, ul {list-style: none}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}

• normalize

Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。 这是一个现代的，HTML5-ready 的 CSS 重置样式集。bootstrap就使用了它，github的地址为：https://github.com/necolas/normalize.css/， Normalize.css做了以下几件事：

• 保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性：用一些小技巧解释代码：用注释和详细的文档来Modernizr

Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

可能用到的网站和兼容工具

CSS属性兼容查询

caniuse.comHack 的写法查询 browserhacks.com

html5shiv.js

respond.js

css reset

normalize.css

Modernizr