转自：http://www.ypgogo.com/Event/info/vid/54846
使用bootstrap3把公司官网重新“装修”了一下。但是在IE8下，它竟然显示的是“sr-only”里的菜单。页面的内容也是跟手机上那样，并排两列的，变成了一列……显然，我的电脑被识别为手机设备了。而IE的地位，始终无人能撼动。2013年3月的数据显示：
IE8、IE9单独出来也比排在第二、第三名的Firefox和Chrome的份额高。所以，IE的市场仍然不能忽视。
尽管bootstrap早有准备，如head内的代码如下
即只要是IE9以下，就调用两个专门的js。不过，这两个js也没有解决问题。
仔细阅读bootstrap的说明，可能可以解决问题的方法列举如下：
1、没有正确设置远程调用
调用html4shiv.js和respond.min.js时，如果要调用远程的，需要特别处理一下。即跨域名调用的时候有点额外的事情要做。具体做法如下链接：
https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup
不过，我不准备调用远程的，我使用本地的调用。所以，这个问题我不用考虑了。
2、调用的方法不正确
不要用file://或@import形式引用respond.min.js或respond.js
3、针对浏览器的内容标识
关于这一句的用途，有高人做了详细的介绍：
所以要再加一句：
4、IE8不支持container的几个属性
IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的组合使用.所以，v3.0.1的bootstrap中对container的类，已经不再使用max-width了。
5、JS与CSS的引入顺序导致的问题
有个人的问题是把引用js与css时，顺序不对导致错误。他的结论是先css，再js。如下图：
6、DOCTYPE前后有空行
不过，说实话，getbootstrap.com，做为官方网站。使用IE6、7、8访问的时候，主菜单也是不见了，显示的结果跟移动设备上的一样。他们都解决不了或者不愿意，我们要么使用别的UI如Yahoo!的Pure UI，要么就得自己想办法搞定它。
上图：IE8中的bootstrap官网
7、修改bootstrap.css
有一位使用的是bootstrap2.1.1，是菜单不显示了。他修改了了navbar-inner{ filter:none}解决了问题，不过，我使3.0版的，那段代码已经没有了。
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8、使用css3-mediaquerires.js
http://code.google.com/p/css3-mediaqueries-js/
它起的作用跟respond.js或respond.min.js一样。不过，我试验不成功。
9、使用quirks mode（兼容模式）
定义网页时，向后兼容旧的浏览器的模式就叫quirks mode，与之对应的是“标准模式” standard mode。具体来说，是将<!DOCTYPE html>写成以前的那种
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
有人说这样可以让bootstrap3的网页在IE8下正常显示。我试验，不成功！
扫一扫
4068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
