Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用

Posted 2023-03-06

【中文标题】Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用

【英文标题】：Twitter Bootstrap Responsive layout does not work in IE8 or lower

【发布时间】：2012-06-15 11:11:21

【问题描述】：

我使用 twitter bootstrap 开发了一个网站，似乎响应式布局部分在 IE8 及以下的所有 IE 浏览器中都被破坏了。这些浏览器不支持吗？

【问题讨论】：

IE

我不确定，但也许你可以使用谷歌浏览器框架。 （适用于 ie6 及更高版本）这将允许在旧浏览器中使用 html5。 chromium.org/developers/how-tos/chrome-frame-getting-started

好的，谢谢，这在文档中不是很清楚。

***.com/questions/17947182/…

【参考方案1】：

You should all read this forum post.

它非常清楚地解释了 IE 和 Twitter Bootstrap 之间的挑战。它还为您提供切实可行的解决方案。

引用：

这里的问题是在官方页面上 http://twitter.github.com/bootstrap/ 它声称可以在所有 浏览器，甚至IE7。哪个，理论上可以，但你必须 在开发时围绕一定的思维框架进行设计和开发 响应式。

【参考方案2】：

这些是我为使其工作而采取的步骤：

看一下 IE8 中的 response.js 演示页面：https://rawgithub.com/scottjehl/Respond/master/test/test.html

它可以工作，因此通过将 response.js 下载到您的供应商/资产或类似的地方来使其在本地工作。

禁用您的本地引导程序并在您的 css 中尝试：

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em)
  body 
    background: blue;
  

有效！

因为我用的是cdn，所以需要下载到本地托管：http://getbootstrap.com/getting-started/#download

所以，它适用于这些：

= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'

您还需要删除任何 @import 声明。

【参考方案3】：

我在以下位置使用了 html5shiv：

https://code.google.com/p/html5shiv/

这对我有用。也可以使用 bower。

【参考方案4】：

我已经尝试了上面描述的所有方法，但是效果很慢。我提供下一种方法。我们应该分解包含 @media 的 css 文件并将每个规则插入到单独的文件中。然后我们应该根据浏览器屏幕宽度有条件地上传每个文件。所有这些操作都将执行脚本 cload.js。下载 cload.js 并阅读如何使用它你可以here

【参考方案5】：

如果你想有更好的性能并且你的结构不是太复杂。

你可以试试Respond.JS

来自作者：

这不是唯一的 CSS3 媒体查询 polyfill 脚本；但它 该死的可能是最快的。

如果您正在寻找更强大的 CSS3 媒体查询支持，您可以 查看http://code.google.com/p/css3-mediaqueries-js/。在测试中， 我发现该脚本在渲染复杂时明显很慢 响应式设计（文件大小和性能），但它确实 确实支持比此脚本更多的媒体查询功能。大帽子 给作者小费！ :)

【讨论】：

为了避免 Respond.js 出现 CORS 问题，在本地下载和托管 Bootstrap CSS（和相关资产）至关重要。

【参考方案6】：

要在 IE 8 及更低版本中支持@media 查询，请查看 css3-mediaqueries-js。

css3-mediaqueries.js by Wouter van der Graaf 是一个 JavaScript 库，可让 IE 5+、Firefox 1+ 和 Safari 2 透明地解析、测试和应用 CSS3媒体查询。 Firefox 3.5+、Opera 7+、Safari 3+ 和 Chrome 已经提供原生支持。

PS：我使用 Twitter Bootstrap 和这个插件，效果很棒！希望这可以帮助！ :)

【讨论】：

你并不总是想添加 polyfills 来支持 ie7 和 8。这似乎是一个很好的情况，但实际上媒体查询是用于支持大格式屏幕和移动设备（很可能两者都不是）将运行 ie7/8)。

申请css3-mediaqueries.js 后我没有运气。我不得不将 @media-queries 更改为 @media all and (max-width: ...)

我无法让 css3-mediaqueries.js 工作，所以我尝试了 respond.js，它与 IE8 上的引导程序一起工作

您只是在标头中导入respond.js 并且它可以工作吗？还是有更多的参与让它工作......？谢谢

但问题是 IE8 不支持媒体查询。 caniuse.com/#feat=css-mediaqueries