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

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

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

部分兼容问题处理方案

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

//处理方案：  *{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提供及隐藏代码。

    <!--  

• IE Hack

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

• js 可以力检测

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

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

• html5shiv.js

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

• 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