信游平台登陆

注册 | 登录 | 网址 接待拜候八百站长

IE8+兼容经历小结

2016/5/31 9:21:03 作者:站长日记 来历:http://www.hustlzp.com/post/2014/01/ie8-compatibility 浏览:3134次

本文分享下我在名目中堆集的IE8+兼容性题目的处置体例。根据我的理论经历,若是你在写HTML/CSS时辰是根据W3C保举的体例写的,而后上面的几点都存眷过,那末根基上很大一局部IE8+兼容性题目都OK了(这里的IE8+首要是指IE8,据小我目测,IE9+的衬着结果已很是好了)。

后期筹办

测试IE兼容性必须要在Windows中测,并且是Win7+,因为WinXP最高只撑持IE8,IE9就呵呵啦!大局部做Web的童鞋都不是利用Windows做为开辟环境,要末是Linux刊行版,要末是Mac OS。怎样办?普通有2种体例:

  • 开Windows假造机

  • 将开辟环境临时切换到Windows

若是你的机械充足快,我保举前一种体例。但若是机械不行,开假造机就会很卡。若是你是Pythonista,我之前写的一篇日记《》可以或许会对你有点用途。

而后须要在Windows里装置用于测试的浏览器,查了下百度统计的比来三个月的:

我感觉可以或许把精神集合在这几个浏览器上:IETester(IE8-IE9)、360浏览器、搜狗浏览器、Chrome。IETester测完了倡议再用实在的IE8、IE9过一遍,以防万一。

DOCTYPE

起首须要确保你的HTML页面起头局部要有DOCTYPE申明。DOCTYPE告知浏览器利用甚么样的HTML或XHTML标准来剖析HTML文档,具体会影响:

  • 对标记、attributes 、properties的束缚法则

  • 对浏览器的衬着形式发生影响,差别的衬着形式会影响到浏览器对CSS 代码乃至 JavaScript 剧本的剖析

DOCTYPE是很是关头的,今朝的最好理论便是在HTML文档的首行键入:

<!DOCTYPE html>

对DOCTYPE的具体论述就不睁开了,可以或许参考:《》、《》。

利用meta标签调理浏览器的衬着体例

IE8中有一个“兼容性视图”的观点,现在IE8宣布时,绝对IE6/7已做出了很是大的改良,可是良多老站点仅针对IE6/7停止了优化,利用IE8衬着反而会一团糟。为了赐顾帮衬这些苦逼的前端工程师,IE8插手了“兼容性视图”功效,如许的话就可以或许在IE8中利用IE6或IE7的内核衬着页面。这个固然不是咱们想要的,以是须要利用meta标签来强迫IE8利用最新的内核衬着页面,代码以下:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge表现强迫利用IE最新内核,chrome=1表现若是装置了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以或许让用户的浏览器表面依然是IE的菜单和界面,但用户在浏览网页时,现实上利用的是Chrome浏览器内核),那末就用Chrome内核来衬着。对于此meta标签的具体申明,可参见StackOverflow上的。

国际存在良多双核浏览器比方360浏览器、搜狗浏览器,它们是怎样决议某页面究竟利用哪一种内核衬着?上面援用一段360浏览器v6新特征的:

因为尽人皆知的环境,国际的支流浏览器都是双核浏览器:基于Webkit内核用于常常利用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例,咱们优先经由过程Webkit内核衬着支流的网站,只需小量的网站经由过程IE内核衬着,以保障页面兼容。在曩昔很长一段时辰里,咱们首要的节制手腕是一个几百k巨细网址库,一个经由过程持久野生经营搜集的网址库。

虽然咱们尽力经由过程用户反应、代码标签智能判定手艺进步浏览器的主动切批准确率。可是在良多环境下,咱们依然没法到达百份百准确。是以,咱们新增添了一个节制手腕:内核节制Meta标签。只需你在本身的网站里增添一个Meta标签,告知360浏览器这个网址应当用哪一个内核衬着,那末360浏览器就会在读取到这个标签后,当即切换对应的内核。并将这个行动利用于这个二级域名下一切网址。

处置体例360已告知咱们了,经由过程meta标签的体例倡议其利用Webkit,代码以下:

<meta name="renderer" content="webkit">

我不做详尽的查问拜访,不晓得其余的双核浏览器是不是撑持此特征。

Media Query

IE8仿佛没法辨认Media Query,以是须要hack一下啦!保举接纳途理此题目,具体体例参见它的文档便可。

完成CSS3的某些特征

IE8不撑持CSS3的良多新特征,不过咱们可以或许利用一些比拟成熟的hack体例,我接纳的是,它撑持的特征有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

出格注重:请必然浏览CSS PIE给出的。

辨认HTML5元素

若是你在前端代码中利用了HTML5的新标签(nav/footer等),那末在IE中这些标签可以或许没法普通显现。我利用,具体利用体例见文档。

对于max-width

另有一个在IE8中常常碰到的题目便是max-width,网页中图片的尺寸可以或许比拟宽,我会给它设置max-width: 100%来限定其宽度最大为父容器的宽度,可是偶然辰却不见效,渐渐试探才得悉IE剖析max-width所遵照的法则:严酷请求间接父元素的宽度是牢固的。经尝试发明Chrome所遵照的法则比IE松一些,以是这个题目应当不归属为IE兼容性题目,不过我还是提一下吧。分享两个我碰到的场景:

(1)td中的max-width

若是针对td中的img元素设置max-width: 100%,在IE和Firefox你会发明不见效,而在Chrome中倒是可以或许的。经查问发明须要给table设置table-layout: fixed,对此属性的具体诠释见。

(2)嵌套标签中的max-width

以下的HTML规划:

<div class="work-item">
    <a href="#" class="work-link">
        <img src="sample.jpg" class="work-image img-responsive">
    </a></div>

最外层元素.work-item设置了牢固宽度,可是对img设置max-width为100%却有效,厥后才发明须要再对a标签设置width: 100%,如许能力使最内层的img标签布满全数div。

嵌套inline-block下padding元素堆叠

HTML代码:

<ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li></ul>

CSS代码:

ul li{
    display: inline-block;}ul li a{
    display: inline-block;
    padding: 10px 15px;}

按理来讲a标签之间的间隔应当是30px,但在IE8中呈现了堆叠,只需15px。和也提到了一样的题目。我的处置体例是利用float: left替换display: inline-block完成程度规划。

placeholder

IE8下不撑持HTML5属性placeholder,不过为处置此题目的js插件挺多的,比方:。

last-child

first-child是CSS2的内容,可是last-child就不是了,以是IE8不买账。保举的做法不是利用last-child,而是给最初一个元素设置一个.last的class,而后对此停止款式设置,如许就全数兼容了。

background-size: cover

若是你想利用background-size: cover设置全屏背景,很遗憾IE8办不到...但可以或许利用IE独占的AlphaImageLoader滤镜来完成,增加一条以下的CSS款式:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了。

还没完,若是你在此背景之上安排了链接,那这个链接是没法点击的。普通环境下的处置方式是为链接或按钮增加position:relative使其绝对浮动。

filter blur

CSS3中供给撑持滤镜结果的属性filter,比方撑持高斯恍惚结果的blur(近似iOS7的结果):

filter: blur(10px);-webkit-filter: blur(10px);-moz-filter: blur(10px);

IE8对filter: blur(10px)的显现结果是对HTML元素停止小规模的恍惚处置,这个结果并不是高斯恍惚,要想撑持高斯恍惚,须要以下设置:

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在理论中发明一个坑便是,一切position: relative的元素都不会失效。

其余的发明是,IE9对filter: blur(10px)有效,而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是针对元素小规模的恍惚结果。


好了,今朝来讲我所碰到的IE8+兼容性题目就这些啦。前端和后端我都做一点,如许的益处在于一小我可以或许自力开辟网站,害处便是各方面都不精。若是你有蛮主要的补充,或更好的处置体例,接待告知我!