如何使IE8上的Bootstrap响应式布局工作

Question

如何使IE8上的Bootstrap响应式布局工作

Ray*_*eng 19 internet-explorer-8 fluid-layout media-queries responsive-design twitter-bootstrap

我已经搜索了一段时间,发现有些人让它工作,但没有一个提供任何代码示例.

我尝试了他们的建议,但它对我不起作用.通过建议,我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />,respond.js或者css3-mediaqueries-js,但没有一个帮助.

这里有一个的jsfiddle,如果你与IE8浏览它,你会看到两个a与b在同一行,不管浏览器的宽度.

但是,如果您使用Chrome,FF或IE9或更高版本进行查看,则会根据浏览器宽度在不同的行或单行上看到它们.

UPDATE

我试图一次取消注释其中一个(css3-mediaquery,html5shiv并做出响应),但是对其中任何一个都没有运气.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jas*_*wne 31

IE 8不支持开箱即用的媒体查询.

基于这个问题和这个问题,您将要使用像css3-mediaqueries-js或Respond这样的扩展.

得到它了!我必须同时使用`html5shive`和`respond.js`. (16认同)
嗨,如上所述,我已经尝试添加respondjs,meta标签,css3-mediaqueries,html5shiv,但似乎没有什么工作在我的情况下,容器类没有出现在IE8中.我正在使用bootstrap 3.你能帮忙吗？ (3认同)

Answer 2

Aks*_*aje 10

尝试使用html5shiv,它基本上是一个HTML5 IE启用脚本,并且应该在IE 6,7和8中运行bootstrap.这也可以直接热链接,如下所示:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Run Code Online (Sandbox Code Playgroud)

它必须包含在<body>元素之前(即在<head>中)

Answer 3

Cra*_*don 8

您的问题是尝试将respond.js与外部域上的CSS样式表一起使用.Respond.js将修复IE6-IE8的媒体查询.

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js的工作原理是通过AJAX请求CSS的原始副本,因此如果您在CDN(或子域)上托管样式表,则需要上传代理页面以启用跨域通信.

有关演示,请参阅跨域/ example.html:

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

Run Code Online (Sandbox Code Playgroud)

如果您遇到跨域设置问题,请确保respond-proxy.html没有附加查询字符串.

归档时间：	12 年，11 月前
查看次数：	83566 次
最近记录：	8 年，4 月前