想必做前端开发的都应该听说过Bootstrap, 一款优秀的前端开发框架。前段时间博主做的一个项目便尝试着用了boostrap来搭建,确定非常快,而且响应式做的特别好,省去了许多麻烦。不过由于我用的是Bootstrap 3.0,结果发现在ie8下崩掉了,心塞啊!又翻出bootstrap官方API,细读之……这才明白由于bootstrap做响应式所用的栅格布局在ie8下不被支持,而且也不支持html5的新标签和css3的一些效果,如圆角、阴影、一些过渡效果等……(详情见下图) 翻了好多教程,总结出以下方法,与大家分享!

bootsrap已经对ie9渲染的很好了,亲测
听说bootstrap2.0对ie8支持蛮好,不过没有用过。有用过的朋友欢迎留言告诉我

DOCTYPE

有些人可以不太注意html开头的doctype声明,其实这是非常重要的。DOCTYPE会告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:

标记、attributes 、properties的约束规则
对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript 脚本的解析

所以千万不要忘记在html文档首先键入:

1
<!DOCTYPE html>

而且注意doctype前后不要有空行

使用meta标签来调节浏览器的渲染方式

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此

标签加入到你的页面中:

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

按 F12 键打开 IE 的调试工具,就可以看到 IE 当前的渲染模式是什么。
此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中,为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。

国产浏览器高速模式

国内浏览器厂商一般都支持兼容模式(即 IE 内核)和高速模式(即 webkit 内核),不幸的是,所有国产浏览器都是默认使用兼容模式,这就造成由于低版本 IE (IE8 及以下)内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是,国内浏览器厂商逐渐意识到了这一点,某些厂商已经开始有所作为了!

将下面的

标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:

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

目前只有360浏览器支持此

标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代!

Respond.js

Respond.js是什么?官方解释A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
其实就是使media query(媒体查询)兼容ie6-8

附上链接https://github.com/scottjehl/Respond
然后将其引入到页面中,一般是放在head中。
注意:
1、一定要在所以css引入完毕后再引入respond.js
2、不要用@import方式引入css文件,respond.js还不支持

引入方式如下:

1
2
3
<!--[If lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->

使用ie8测试,咦,好像并没有什么用,页面一点变化都没有!
是了,如果你是用file://方式打开的,页面有变化才怪,来看一下bootstrap给出的解释

看不懂?说白了就是respond.js只有在服务器端才可以使用,直接在本地打开html文件,是无法测试的!!
那要怎么办?简单,在本地配个服务器就行了。
你可能感觉配服务器好难啊!不要担心,我们只需使用第三方软件就好了,WampServer,好心的软件开发者们已经帮你们配置好了一切,如何使用请看我的另一篇博客
Windows下WampServer初体验

好了,解决了这个问题,再次测试一下,发现还不错,布局基本没问题了,但是你如果使用了html5新标签(如header,nav,footer等)的话,可能会发现这些标签并不被支持。这时就需要html5shiv出场了!

HTML5 Shiv

先附上github链接https://github.com/aFarkas/html5shiv
使用方法:
这个没有respond.js那么麻烦,直接引入就好,再加上面的respond.js,代码就变成了下面这样

1
2
3
4
<!--[If lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js">
<![endif]-->

CSS3

通过respond.jshtml5shiv,你的页面已经基本兼容ie8+了,当然你如果追求更高的话,想要解决css3的支持问题,可以采用一些hack方法,比较流行的如CSS3 PIE,可以支持border-radius、box-shadow、border-image、multiple background images、linear-gradient等。具体使用方法参照官方文档就好

placeholder

ie8下不支持html5的属性placeholder,可以使用jquery插件来解决这个问题
https://github.com/mathiasbynens/jquery-placeholder

后记

些文只列出了一些ie8下的兼容问题,还有诸好background-size,last-child,inline-block,max-width等问题没有提供详细的解决方案,这篇文章会继续更新。如果一些问题你有更好的解决方法,欢迎在下面留言!也可以直接联系我, 我的邮箱为: Waydrow@163.com

参考链接:

http://hustlzp.com/post/2014/01/ie8-compatibility
http://blog.csdn.net/chenhongwu666/article/details/41513901