IE8与Bootstrap 3

来源：互联网发布：python开发网页怎么样? 编辑：程序博客网时间：2024/05/20 12:46

转自：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、针对浏览器的内容标识

关于这一句的用途，有高人做了详细的介绍：

http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

所以要再加一句：

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下正常显示。我试验，不成功！

0 0