DOCTYPE

首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:

对标记、attributes 、properties的约束规则
对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript 脚本的解析
DOCTYPE是非常关键的,目前的最佳实践就是在HTML文档的首行键入:

对于DOCTYPE的具体阐述就不展开了,可以参考:《正确使用DOCTYPE》、《CS002: 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一下啦!推荐采用Respond.js解决此问题,具体方法参见它的文档即可。

实现CSS3的某些特性

IE8不支持CSS3的很多新特性,不过我们可以使用一些比较成熟的hack方法,我采用的是CSS3 PIE,它支持的特性有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

特别注意:请一定阅读CSS PIE给出的Know Issues。

识别HTML5元素

如果你在前端代码中使用了HTML5的新标签(nav/footer等),那么在IE中这些标签可能无法正常显示。我使用html5shiv,具体使用方法见文档。

关于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,对此属性的具体解释见W3School。

(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插件挺多的,比如:jquery-placeholder。

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的兼容性问题的更多相关文章

  1. IE8的兼容性问题

    IE的兼容性问题是前端开发人员的老大难问题,不过随着时代的发展,IE6逐渐的被淘汰,现在以及很少有网站兼容IE6了,一般都兼容到IE8,现在我总结了一些IE8的兼容性问题及解决方法. 1.使用meta ...

  2. 【原创】最有效解决IE8 position兼容性问题

    看了网上的的帖子真是水的一塌糊涂,完全没有解决我和广大网友们的关于ie8下position兼容性问题. 网上有的技术我就不说了 ,大家自行搜索,我想说的重点是 ie8不支持html5的新标签.这是重点 ...

  3. IE8浏览器兼容性问题

    IE8存在的问题1.不支持forEach循环,建议用原生2.不建议jQuery9(ajax存在部分问题),建议用jQuery8/73.不支持伪类元素4.颜色,不完全支持RGBA(33, 132, 25 ...

  4. 关于bootstrap IE8的兼容性问题

    非常久没有写技术类的文章了.这几天在用bootstrap来做我们站点的UI框架,感觉还是不错的.只是遇到一点不大不小的问题,那就是有朋友在IE8下訪问我们的站点.界面变成了跟手机浏览一样的界面. 后来 ...

  5. placeholder在IE8中兼容性问题解决

    placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...

  6. IE关闭兼容性视图

    不知道什么时候,ie8的“兼容性视图设置”变成了灰色,如图:  今天通过设置组策略,终以解决了这个问题: ie8的兼容性视图设置灰色的解决办法:运行gpedit.msc--用户配置/计算机配置--管理 ...

  7. 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri

    最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...

  8. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  9. IE8 下面通过滤镜的方式进行图片旋转

    首先,为什么我会提出这样的方式来进行操作呢?原因还是需求导致: 在做项目中,有这样一个需求,在进行网页中图片查看的时候,需要对图片的操作有支持旋转和缩放这些操作,看似这样的网上插件有很多,对!但是对于 ...

随机推荐

  1. 一个炒鸡好用的pdf阅读器

    下载地址:https://www.sumatrapdfreader.org/free-pdf-reader.html 一个关系很好的同事推荐的pdf阅读器  之前用的感觉不错  每次都记不住  自己收 ...

  2. 如何查看浏览器保存的密码——通过js代码的方式

    打开网站,在密码输入框内鼠标右击,选择“审查元素”(或者按F12),浏览器底部弹出网页的代码,并自动定位到密码框的代码段. 1. 第一种方法 选中元素后,直接在 Console 控制台中输入以下命令( ...

  3. Java Web 修改请求参数

    方法一.继承 HttpServletRequestWrapper , 实现自定义 request 1.除了修改的参数,其他 Header 等参数不变, 等同于修改了请求参数 2.实质是另一个请求 /* ...

  4. [书籍翻译] 《JavaScript并发编程》第六章 实用的并发

    本文是我翻译<JavaScript Concurrency>书籍的第六章 实用的并发,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript ...

  5. centos7安装google浏览器

    1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /ect/yum.repos.d/ vim google-chrome.repo ...

  6. stm32 输入捕获

    根据定时器的计数频率,我们就可以算出t1-t2的时间,从而得到高电平脉宽 计算公式 N * ARR + CCRx2 首先设置定时器通道为上升沿捕获,这样在t1时刻,就会捕获到当前的CNT值,然后立即清 ...

  7. Java基础加强-代理

    /*代理*//*代理的概念与作用*/ 代理过程架构 客户端Client原来直接调用的是Target目标类 使用代理后,现在让客户端不要调用Target,调用代理类Proxy,代理类Proxy和目标类T ...

  8. 【SSH学习笔记】浅谈SSH框架

    说在前面 本学期我们有一门课叫做Java EE,由陈老师所授,主要讲的就是Java EE 中的SSH框架. 由于陈老师授课风格以及自己的原因导致学了整整一学期不知道在讲什么,所以才有了自己重新学习总结 ...

  9. bond模式详解

    目录 bond模式详解 一.什么是bond? 二.为什么使用bond? 三.bond模式配置 1.配置linux bond 2.将bond绑定到ovs上面(可选) 四.bond模式 1.模式0 2.模 ...

  10. python3和python2共存

    在window上同时安装py3.5和py2.7,但是命令行敲击python命令后,默认只出现py2.7的信息,敲击python3命令,提示未知的命令. 从网上查了一下,虽然环境变量都添加对了,但是可执 ...