浏览器兼容问题

2017-03-25 本文已影响66人路西法丶L

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

CSS hack

由于不同厂商的浏览器，比如 Internet Explorer, Safari, Mozilla Firefox, Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果。
CSS Hack大致有3种表现形式：

属性前缀法(即类内部 Hack)：例如 IE6 能识别下划线_和星号*，IE7 能识别星号*，但不能识别下划线_，IE6~IE10 都认识\9，但 firefox 前述三个都不能认识。
选择器前缀法(即选择器 Hack)。
IE 条件注释法(即 HTML 条件注释 Hack)：针对所有 IE (注：IE10+ 已经不再支持条件注释)：，针对 IE6 及以下版本：
。这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。

浏览器兼容的思路

要不要做
产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)
做到什么程度
让哪些浏览器支持哪些效果
如何做
根据兼容需求选择技术框架/库
根据兼容需求选择兼容工具
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强和优雅降级
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

浏览器兼容示例

IE 条件注释

项目      范例               说明
！     [if !IE]            非IE
lt    [if lt IE 5.5]        小于IE 5.5
lte     [if lte IE 6]        小于等于IE6
gt   [if gt IE 5]         大于 IE5
gte     [if gte IE 7]        大于等于IE7
|       [if (IE 6)|(IE 7)]    IE6或者IE7

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

.boxshadow #MyContainer { 
  border: none;
  -webkit-box-shadow: #666 1px 1px 1px;
  -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
  border: 2px solid black;
}

box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

浏览器兼容常用方法

条件注释
IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上。
如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
IE Hack
针对 IE 浏览器所编写的 CSS ，来实现网页在 IE 浏览器不同版本中正常渲染的的方法。
js 能力检测
检测浏览器是否支持特定的能力，以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
html5shiv.js
html5shiv 主要解决 HTML5 提出的新的元素不被 IE6-8 识别，这些新元素不能作为父节点包裹子元素，并且不能应用 CSS 样式。
Respond.js
Respond.js 用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计( Responsive Web Design)。
css reset
重置浏览器的 CSS 默认属性。
Normalize.css
Normalize.css 是一个可以定制的 CSS 文件，它保留了浏览器中有用的默认样式并且将样式标准化，让不同的浏览器在渲染网页元素的时候形式更统一。
Modernizr
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。通过它可以检测不同的浏览器对于 HTML5 特性的支持情况。
postCSS
postCSS 使 CSS 变成 JavaScript 的数据，使它变成可操作。PostCSS 是基于 JavaScript 插件，然后执行代码操作。PostCSS 自身并不会改变 CSS，它只是一种插件，为执行任何的转变铺平道路。
postCss以一种原生 CSS 的书写方式, 帮你解决浏览器前缀、IE 兼容、以下一代 CSS 书写方式兼容现在浏览器。

属性兼容性查询网站

caniuse.com

【注】版权归 Lucifer 所有，转载请联系作者。