Question

我在我的网页中使用bootstrap 3.0.3并添加了html5shiv lib并响应lib以解决此问题，但它无法在Internet Explorer 8上运行。

我的HTML代码：

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

它在FF和Webkits浏览器中运行良好但导致IE：

enter image description here

现在演示是here，我该如何解决？

Answer 1

根据帖子中的解决方案：Must Bootstrap container elements include row elements?，您的标记应为：

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

并使用此CSS在IE8中实现它：

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

这是工作 demo

.row内不需要.container类，但如果包含，则容器＆gt;行是不是行的顺序＆gt;容器（您编码）！

修改

值得注意的是respond.js仅适用于本地文件。因此，如果您在IE8上为您的网站获得了CDN引导程序的css个文件，那么它将无效，请尝试使用bootstrap.css的本地副本


Internet Explorer 8和Respond.js

在使用Respond.js时请注意以下警告   Internet Explorer 8的开发和生产环境。

Respond.js和跨域CSS   将Respond.js与托管在不同（子）域上的CSS一起使用（for   例如，在CDN上）需要一些额外的设置。请参阅Respond.js   docs详细信息。

Respond.js和file：//   由于浏览器安全规则，Respond.js不适用于页面   通过file：//协议查看（就像打开本地HTML文件时一样）。   要在IE8中测试响应功能，请通过HTTP（S）查看您的页面。看到   Respond.js文档了解详细信息。

Respond.js和@import   Respond.js不适用于通过@import引用的CSS。在   特别是，一些Drupal配置已知使用@import。看到   Respond.js文档了解详细信息。

IE兼容模式   旧的Internet Explorer兼容性不支持Bootstrap   模式。为了确保您使用IE的最新渲染模式，   考虑在您的网页中加入相应的标记：


来源：Getbootstrap

Answer 2

如果不需要“响应性”，则可以使用col-xs- *类而不是为respond.js设置代理。它有效，因为col-xs- *类与媒体无关。它解决了我的问题。

Answer 3

以一种仅适用于IE而不是任何其他浏览器的方式应用它可能会更好，因为它可能会破坏您的一些响应式网站。本页特别讲述了如何仅应用IE浏览器。

Apply CSS rules if browser is IE

Answer 4

另外你需要记住，bootstrap.css位于你头部的respond.js之上：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap example</title>

    <noscript>
        <link rel="stylesheet" href="../assets/css/noscript.css" />
    </noscript>

    <!-- Bootstrap -->
    <link href="../assets/bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">

    <!--[if lte IE 8]>
    <script src="../assets/js/ie/es5-shim.min.js"></script>
    <script src="../assets/js/ie/es5-sham.min.js"></script>
    <script src="../assets/js/ie/html5shiv.js"></script>
    <script src="../assets/js/ie/respond.min.js"></script>
    <![endif]-->
</head>

列是IE 8中的全宽 - Css引导程序

4 个答案: