如何解决bootstrap与ie不兼容问题

html-css012

如何解决bootstrap与ie不兼容问题,第1张

bootstrap有使用CSS3,所以ie9以下浏览器不会很顺畅。IE9以下的兼容性不是很好。

IE本身就是怪胎,就搞一些和外界标准不一致。搞得web开发考虑这考虑那的兼容性

基本上css3的没法正常使用:

- 无法正常显示 CSS 3 圆角 ->全部变成方块

- 无法正常显示 CSS 3 渐变 ->拟物的按钮全都变成了扁平的

- 无法正常显示 CSS 3 阴影 ->方块就是方块,没有影子

搜了下一些解决方案:

1. Bootstrap UI整体在IE8下变窄,进而组件摆放论套

问题出在IE8不支持@media ,而Bootstrap的一大优势Responsive UI是完全基于@media的。解决这个问题, 使用Respond.js

2. Bootstrap UI组件在IE8下美观有问题

使用bootstrap-ie78.css

bootstrap IE8 兼容性处理:

针对 IE8 仍然需要额外引入 Respond.js 文件以支持媒体查询(media query)。

主要存在的问题是:

Respond.js 与 file:// 协议

由于浏览器的安全机制,Respond.js 不能在通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性,务必通过 http 协议访问页面(例如搭建 apache、nginx 等)。