【问题标题】:Twitter Bootstrap Responsive layout does not work in IE8 or lowerTwitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用
【发布时间】:2012-06-15 11:11:21
【问题描述】:

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

【问题讨论】:

标签: twitter-bootstrap css internet-explorer-8 media-queries


【解决方案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
          猜你喜欢
          • 1970-01-01
          • 2016-01-22
          • 1970-01-01
          • 2012-12-05
          • 1970-01-01
          • 2012-07-06
          • 1970-01-01
          • 1970-01-01
          • 2013-05-01
          相关资源
          最近更新 更多