CSS Twitter Bootstrap 响应式布局在 IE8 或更低版本中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10998877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Responsive layout does not work in IE8 or lower
提问by medium
I developed a site using twitter bootstrap and it seems that the responsive layout part is broken in all IE browsers from IE8 and below. Is this just not supported for these browsers?
我使用 twitter bootstrap 开发了一个站点，似乎响应式布局部分在 IE8 及以下的所有 IE 浏览器中都被破坏了。这只是不支持这些浏览器吗？
采纳答案by Praveen Kumar Purushothaman
For supporting @mediaqueries in IE 8 and below, check out
css3-mediaqueries-js.
要@media在 IE 8 及以下版本中支持查询，请查看
css3-mediaqueries-js。
css3-mediaqueries.jsby Wouter van der Graafis a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
CSS3-mediaqueries.js由沃特·范德格拉夫是一个JavaScript库，使IE 5+，火狐1+和Safari 2透明地剖析，测试和应用CSS3媒体查询。Firefox 3.5+、Opera 7+、Safari 3+ 和 Chrome 已经提供原生支持。
PS: I use Twitter Bootstrapwith this plugin and it works awesome! Hope this helps! :)
PS：我使用Twitter Bootstrap和这个插件，它工作得很棒！希望这可以帮助！:)
回答by maxisam
If you want to have better performance and your structure is not too complicated.
如果你想有更好的性能并且你的结构不是太复杂。
You can try Respond.JS
你可以试试Respond.JS
From the author:
来自作者：
This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.
If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)
这不是唯一的 CSS3 Media Query polyfill 脚本；但它可能是最快的。
如果您正在寻找更强大的 CSS3 媒体查询支持，您可以查看http://code.google.com/p/css3-mediaqueries-js/。在测试中，我发现该脚本在呈现复杂的响应式设计（文件大小和性能方面）时明显变慢，但它确实支持比该脚本更多的媒体查询功能。给作者的大帽子提示！:)
回答by Rimian
These are the steps I took to get this working:
这些是我为使其工作而采取的步骤：
Take a look at the response.js demo page in IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html
看一下 IE8 中的 response.js 演示页面：https:
//rawgithub.com/scottjehl/Respond/master/test/test.html
It works so get that working locally by downloading the response.js into your vendor/assets or somewhere similar.
它可以通过将 response.js 下载到您的供应商/资产或类似的地方来使其在本地工作。
Disable your local bootstrap and try this in your css:
禁用您的本地引导程序并在您的 css 中尝试此操作：
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
body {
background: blue;
}
}
It works!
有用！
Because I was using the cdn, I needed to download and host it locally:
http://getbootstrap.com/getting-started/#download
因为我使用的是cdn，所以需要下载并在本地托管：http://getbootstrap.com/getting-started/#download
So, it works with these:
所以，它适用于这些：
= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'
You'll also need to get rid of any @import declarations.
您还需要删除任何 @import 声明。
回答by Sergey Onishchenko
I have tried all of the ways described above, and it works but so slowly. I offer the next approach. We should decompose css file that is contains @media and insert each rule in the separate file. Then we should conditionally upload each file, depending from browser screen width. All this actions will do the script cload.js. Download cload.js and read how to use it you can here
我已经尝试了上述所有方法，它有效但速度很慢。我提供了下一个方法。我们应该分解包含@media 的css 文件并将每个规则插入到单独的文件中。然后我们应该有条件地上传每个文件，具体取决于浏览器屏幕宽度。所有这些操作都将执行脚本 cload.js。下载 cload.js 并阅读如何使用它，你可以 在这里
回答by Chris
You should all read this forum post.
It explains very clearly the challenges between IE and Twitter Bootstrap. It also gives you solutions that actually work.
它非常清楚地解释了 IE 和 Twitter Bootstrap 之间的挑战。它还为您提供了实际可行的解决方案。
Quote:
引用：
The problem here is that on the official pages like http://twitter.github.com/bootstrap/it claims to work in all browsers, even IE7. Which, theoretically it can be, but you have to design and develop around a certain frame of mind when developing responsively.
这里的问题是，在像http://twitter.github.com/bootstrap/这样的官方页面上， 它声称适用于所有浏览器，甚至 IE7。理论上可以，但是在响应式开发时，您必须围绕特定的思维框架进行设计和开发。
回答by Josh Petitt
I used the html5shiv at:
我在以下位置使用了 html5shiv：
https://code.google.com/p/html5shiv/
https://code.google.com/p/html5shiv/
This worked for me. It is also available using bower.
这对我有用。也可以使用 bower。
