课题_CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

虽然和大家在学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。

”下面我们先来简单的了解一下什么是CSS Hack。

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。

然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。

总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。

常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。

下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。

下面是我收集有关于各浏览器下Hack的写法1、Firefox@-moz-document url-prefix() {.selector {property: value;}}上面是仅仅被Firefox浏览器识别的写法，具体如：@-moz-document url-prefix() {.demo {color:lime;}}支持Firefox的还有几种写法：/* 支持所有firefox版本*/#selector[id=selector] { property: value; }或者：@-moz-document url-prefix() { .selector { property: value; } }/* 支持所有Gecko内核的浏览器(包括Firefox) */*>.selector { property: value; }2、Webkit枘核浏览器(chrome and safari)@media screen and (-webkit-min-device-pixel-ratio:0) {Selector { property: value; }}上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和Safari浏览器：@media screen and (-webkit-min-device-pixel-ratio:0) {.demo { color: #f36; }}3、Opera浏览器html:first-child>body Selector {property:value;}或者：@media all and (min-width:0) {Selector {property: value;}}或者：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body Selector { property: value; }}上面则是Opera浏览器的Hack写法：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body .demo { background: green; }}4、IE9浏览器:root Selector {property: value9;}上面是IE9的写法，具体应用如下：:root .demo {color: #ff09;}5、IE9以及IE9以下版本Selector {property:value9;}这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：.demo {background: lime9;}6、IE8浏览器Selector {property: value/;}或者：广州活动策划公司@media �screen{Selector {property: value;}}上面写法只有IE能识别，如：.color {color: #fff/;}或者：@media �screen{.color {color: #fff;}}7、IE8以及IE8以上的版本Selector {property: value�;}这种写法只有IE8以及IE8以上版本支持，如.demo {color: #ff0�;}8、IE7浏览器*+html Selector{property:value;}或*:first-child+html Selector {property:value;}上面两种是IE7浏览器下才能识别，如：*+html .demo {background: green;}或者：*:first-child+html .demo {background: green;}9、IE7及IE7以下版本浏览器Selector {*property: value;}上面的写法在IE7以及其以下版本都可以识别，如：.demo {*background: red;}10、IE6浏览器Selector {_property/**/:/**/value;}或者：Selector {_property: value;}或者：*html Selector {property: value;}具体应用如下：.demo {_width/**/:/**/100px;}或者：.demo {_width: 100px;}或者：*html .demo {width: 100px;}上面具体介绍了各种版本浏览器下如何识别各种的Hack写法，包括了IE6-9以及现代版本的浏览器写法。

IE6，IE7，IE8，Firefox等浏览器兼容的css hack一、开发平台的选择我很幸运, 我接触网页前台的时候Firefox2 已经十分红火, 我的所有工作都是在Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在IE 做好再到别的浏览器兼容来得容易, 因为IE 对老标准支持还是很不错的, 而IE 的一些特有功能人家却不支持. 所以我推荐以Firefox 结合Firebug 扩展作为平台.在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码可维护：在资源成本和完美间平衡的向后兼容可读：省力、易记二、Hack 的顺序使用Firefox 作为平台, 只要代码写得够标准, 其实要Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,顺序如下:Firefox -> IE8 -> IE7 -> IE6 -> 其他三、CSS 选择器Hack/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and(-webkit-min-device-pixel-ratio:0){head~body .sofish{display:block;}}这种写法的优缺点是：优点：全面，各种HACK都有；清理无用代码里易认缺点：选择器名称不易记；代码量多（要重复写选择器）四、CSS 属性Hack.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */}这种写法的优缺点是：优点：易记；代码少缺点：不全面五、IE 注释<!--[if IE]>IE only<![endif]--><!--[if !IE]>NOT IE<![endif]-->这种写法的优缺点是：优点：安全；向后兼容好；易维护缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是：优点：全面；易维护；可读性高缺点：占资源；代码量大（要重写选择器）总结：-----------------1、尽量使用单独HACK这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。

为了不同浏览器的观看效果，我们当然没必要为每个浏览器的不同版本写一个样式，这里我们利用“IE条件注释”。

找了一些相关的CSS HACK后，总结的几个方法。

1. 区别FF和IE1-1首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：插入代码：div{background-color: red !important;background-color: blue;}因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。

也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。

1-2还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“插入代码：div{background-color: red;>background-color: blue;}在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。

这样，我们就可以把FF和IE的样式分离开。

下面就是解决IE自己的问题了。

2. 区别IE5.5和IE的其他版本看一个例子：插入代码：div{>background-color: black;>background-color /*IE5.5*/: green;}这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。

这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。

小知识：什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

各浏览器CSS hack兼容表：代码示例：#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例：.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明：1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

3、还有其他写法，比如：*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：/TR/html4/loose.dtd5、顺序：Firefox、IE8、IE7、IE6依次排列。

Shuo de——中国金融数据及工具首席服务商IE、FF、Safari、OP不同浏览器兼容报告柯伯勋2011-03-08上海万得资讯科技有限公司Shanghai Wind Information Co., Ltd.地址: 上海浦东新区福山路33号建工大厦9楼邮编Zip : 200120电话T el : (8621)6886 2280传真Fax : (8621)6886 2281Email : sales@主页:1浏览器内核简介浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。

负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。

所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。

1.1Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。

Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。

由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。

前端开发中常见的浏览器兼容性问题与解决方案随着移动互联网及云计算的迅速发展，前端开发也越来越重要。

然而，不同浏览器之间的差异性造成了许多兼容性问题，给开发者带来了不小的困扰。

本文将介绍一些前端开发中常见的浏览器兼容性问题，并提供一些解决方案。

一、CSS兼容性问题1. 盒模型差异：不同浏览器对盒模型的解析方式有所不同，主要体现在边框和内边距的计算上。

解决方案是使用CSS的box-sizing属性将盒模型设置为border-box，以保证在不同浏览器中的显示效果一致。

2. 行内元素的内外边距：在IE6及更早的版本中，行内元素会忽略内外边距的设置。

解决方案是将行内元素转换为块级元素，或者使用display:inline-block属性来呈现行内块元素的效果。

3. 清除浮动：不同浏览器对清除浮动的方式支持度各不相同。

常用的清除浮动方法有使用overflow:hidden属性、添加空元素并清除浮动、使用clearfix类等。

二、JavaScript兼容性问题1. DOM操作差异：不同浏览器对于DOM操作的实现方式存在差异，例如通过innerHTML属性插入HTML片段在IE中可能导致内存泄漏。

解决方案是尽量使用createElement和appendChild等原生DOM方法来进行元素的动态创建和操作。

2. 事件处理差异：不同浏览器对于事件处理的机制有所不同，例如IE不支持事件捕获，而是通过attachEvent方法进行事件绑定。

解决方案是使用事件委托的方式来减少事件绑定的数量，同时可以借助框架如jQuery等来解决跨浏览器兼容性问题。

3. AJAX兼容性：不同浏览器对XMLHttpRequest对象的支持有所不同，特别是IE6及更早的版本。

解决方案是使用封装好的Ajax库或者利用浏览器的原生ActiveXObject对象来实现跨浏览器的AJAX请求。

三、HTML5兼容性问题1. 标签支持度不足：HTML5中的一些新标签如<header>、<nav>、<section>等在旧版本的浏览器中可能无法正确解析。

兼，是什么！你会想到是什么，作为一个跟HMTL+CSS打交道的人来说，我只能说，我想到的只有兼容性了，兼容性自始至终困惑着许多人，例如坑爹的IE，是纵多主流浏览器中比较戳的那一个，因BUG手下纵多而闻名，家族几代问题层出不穷。

最坑爹的那个就是IE6，被纵多开发人员包括前端人员所憎恶。

却受许多企业的爱戴。

顺便说一下为什么IE6还在中国活得好好的，IE6是Windows XP中自带的一种浏览器，而Windows XP目前来说是微软开发得比较好也是比较成功的系统，使用人数多。

IE6的稳定性也比较好，目前，大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因，IE6之所以盛行当然不只这一些原因，至少IE6什么时候会死那只是时间的问题罢了，在没死之前，我们得保证我们能活着。

好了，接下来来看一下一些兼容性的问题吧，这里只列出数项，日后继续完善。

1.注释引起的血案（1）在注释的时候，如果注释不当，部分浏览器会将会解析错误。

（demo1）如：<!-- 这里是注释内容-->正常显示；<!-- 这里是注释内容- ->时则在IE浏览器下正常显示，在Chrome、Firefox、Safari下不可显示。

或者->也是如此。

解决方法：在进行注释时切记不要着急，看好是否注释有问题，最好能够用VS中自带的注释，以保万无一失。

详见demo1。

（2）注释引发的血案（demo11）文字溢出：问题见demo11,test1：去掉<div style=”float:left;”></div> 中的“float:left”，就会发现多出来的字不见了，页面正常显示；同样去除<div style=”width:350px;float:right;”>中的“float:right”，多余的字也同样消失，页面正常显示。

分析：文字溢出与区块的浮动有关。

test2：把注释放到<div style=”float:left”></div>前面，多余的字消失，页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面，多余的字也同样消失，页面正常显示。

IE6兼容性大全相信从事前端开发的朋友对IE6都是深恶痛绝，恨不得先杀后J，然后再大卸八块以解心头只恨。

虽然是这么可恶的一个浏览器，但是IE6迄今为止的市场占有率仍然很高，截止2009年8月份的市场占有率仍然有25%之多。

那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。

难免有疏漏之处，如若您有更好的建议，欢迎在回复中提出，我会及时加以补充。

1.前言：考虑浏览器的兼容性，我们要做的首先一定要简洁，如果你的布局太复杂，兼容性就更加难以做到。

其次，我们要实用合适的文档声明，因为没有声明的情况下，IE6会出现很多怪异的问题。

W3CSCHOOL指出，XHTML1.0中文档声明包括以下三种：Frameset(框架型)、Transitional(过渡型)、Strict(严格型) 。

而loose为HTML4.01的类型，并非 XHTML的类型。

我们最常用的通常是过渡型，示例代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">第三，当我们完成制作的时候要记得验证我们的代码，有些人认为校验代码没有任何实用价值，但我不这么认为。

校验仅仅只需花费一点点时间，而且将受益于所有浏览器而非仅仅IE6；验证确保了向后兼容并且易于维护。

至少也得验证XHTML！第四，实用渐进增强，即在适当的时候保留一些不兼容浏览器的基本功能，至少不影响用户体验到网站要表现的内容。

最后是如何测试我们的网站，在FF下我们可以使用功能强大的Firebug，可以方便的对网站的CSS及网站结构进行精确快速的运行时查看，甚至对JS设置断点。

而IE下我们的工具相对较为贫乏，但是我们可以使用IETester来测试不同IE版本的显示效果，IETester的开发者也提供了DebugBar这款IE插件免费供个人使用，但商业用户只可试用60天。

目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

Web前端页⾯的浏览器兼容性测试⼼得（三）总结⼀些IE8兼容问题的解决⽅案由于IE8不⽀持HTML5，⽽它⼜是Win7的默认浏览器，我们即使讨厌它，在这⼏年却也拿它没办法。

最近做了个需要兼容IE8的项⽬，不可避免地⽤了HTML5+CSS3，甚⾄canvas和svg，做兼容⼯作的时候不禁叫苦不迭。

⼀个项⽬下来后，倒是收集了⼀些志于让HTML5兼容IE8的库，还有⼀些零散的代码和优雅降级的技巧，整理如下。

IE8的兼容⼯作是个⼤活，这篇⽂章还不完整，肯定有很多疏漏和不⾜，望读者能在评论区指正，同时我也会在之后的项⽬中逐渐丰富这篇⽂章。

⼀、HTML5标签兼容⽅案：html5shiv.jsGitHub地址：IE8不⽀持HTML5的新标签，如<header>、<nav>等标签在IE8⽆法渲染。

html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。

使⽤⽅法：在页⾯中引⽤html5shiv.js⽂件。

必须添加在页⾯的<head>元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js ⽂件不能在页⾯底部引⽤。

⼆、CSS3媒体查询兼容⽅案：Respond.jsGitHub地址：IE8不⽀持CSS媒体查询，对响应式设计⼤⼤不利。

Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。

使⽤⽅法：在页⾯中所有css⽂件的引⽤位置之后引⽤Respond.js。

⽽且Respond.js的引⽤得越早，⽤户看到页⾯闪烁的机会越⼩。

三、CSS3字体单位“rem”兼容⽅案：rem.jsGitHub地址：CSS3引⼊了新的字体⼤⼩单位rem，与em的“相对于其⽗元素来设置字体⼤⼩”的功能不同，rem是相对于根元素<html>的字体⼤⼩⽐率单位，成了⽬前主流的单位之⼀。

IE9+开始⽀持，IE8就只能通过引⼊js库来⽀持了。

使⽤⽅法：在页⾯中引⽤rem.js⽂件。