转自: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下正常显示。我试验,不成功!