Web开发

Bootstrap兼容IE

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

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

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

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

  1. 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，对齐都不对。

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

  3. 最终的解决方案：嵌入两个js搞定了。

    html5shiv.js respond.js

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