如何使 Bootstrap 响应式布局在 IE8 上工作 [英] How to make Bootstrap responsive layout work on IE8

查看：20
本文介绍了如何使 Bootstrap 响应式布局在 IE8 上工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经搜索了一段时间，发现有些人可以使用它，但没有人提供任何代码示例.

我尝试了他们的建议，但对我不起作用.根据建议，我尝试添加 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>、respond.js 或 css3-mediaqueries-js，但它们都没有帮助.

这是一个jsfiddle，如果你用IE8查看，你会看到两个a 和 b 位于同一行，与浏览器宽度无关.

但如果您使用 Chrome、FF 或 IE9 或更高版本查看，您将根据浏览器宽度在不同行或单行看到它们.

更新

我试图一次取消对其中一个(css3-mediaquery、html5shiv 和 response)的注释，但对其中任何一个都没有成功.

<html lang="zh-cn"><头><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"><身体><div class="容器"><div class="row"><div class="span4">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.

<div class="span8">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.

<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>--%>

解决方案

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

基于这个问题和这个问题，你会想要使用像这样的扩展css3-mediaqueries-js 或 回复.

I've been search for a while and found some people got it working, but none of them provide any code samples.

I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.js or css3-mediaqueries-js, but none of them helped.

Here's a jsfiddle, if you view it with IE8, you'll see both a and b are on the same row regardless of your browser width.

But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.

UPDATE

I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.

<!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>

解决方案

IE 8 doesn't support media queries out of the box.

Based on this question and this question, you're going to want to use an extension like css3-mediaqueries-js or Respond.

这篇关于如何使 Bootstrap 响应式布局在 IE8 上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆