Bootstrap兼容IE

Sat, 07 Mar 2015 07:24:29 +0000

之前的几个网站的界面前端全部是用Bootstrap写的。

自己平时一般用chrome，突然有一天，在一台xp上的ie6查看自己的网站效果，顿时天雷滚滚。忘记做浏览器兼容性适配了。于是测试了：

chrome，opera，firefox，ie5.5-10[IE tester]

发现主要问题出在ie上，于是开始寻求解决之道：

http://www.jqueryba.com/1194.html

添加：

1
2
3


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

或者是直接添加：

1
2
3
4
5


<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

然后：

1

header, footer, article, section, nav, menu, hgroup {display: block;}

1
2
3
4
5
6
7
8
9


<script type="text/javascript">
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
</script>

这样的效果实际上不是很好，很多nav，对齐都不对。

BSIE[鄙视ie]
http://www.bootcss.com/p/bsie/
这是在bootstrap基础上编写的开源库，demo效果极好，但是因为历史原因，我的网站成型，不管怎么改，改起来都很费劲，最终不不得已放弃。
最终的解决方案：嵌入两个js搞定了。

html5shiv.js respond.js
对就是上面两个js，至少ie7及以上访问是那么回事了，当然还有一些圆角矩形的小问题，但是nav，栅格排版效果都是极好的，十分感动。

IE on Coinidea的博客

Bootstrap兼容IE

html5shiv.js respond.js