Fatal编程技术网
  • css/
  • 列在IE8-Css引导中是全宽的

列在IE8-Css引导中是全宽的

css internet-explorer twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

列在IE8-Css引导中是全宽的,css,internet-explorer,twitter-bootstrap,internet-explorer-8,twitter-bootstrap-3,Css,Internet Explorer,Twitter Bootstrap,Internet Explorer 8,Twitter Bootstrap 3,我在我的网页中使用Bootstrap3.0.3，并添加了html5shiv库和respond库来修复这个问题，但它在InternetExplorer8上不起作用 我的html代码： <div class="container"> <div class="row"> <div class="col-sm-4" style="background:red;">&nbsp;</div> <div cl

我在我的网页中使用Bootstrap3.0.3，并添加了html5shiv库和respond库来修复这个问题，但它在InternetExplorer8上不起作用

我的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：

现在演示的是，如何修复它？

基于线程中的解决方案：，您的标记应该是：

<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>
这是工作票

.row
类在
.container
中不是必需的，但是如果您包含，那么，container>行是顺序而不是row>container（您编码的）

编辑

可能值得注意的是，这只适用于本地文件。因此，如果您在IE8上为您的网站从CDN获得了
css
引导文件，那么它将不起作用，相反，请尝试使用
bootstrap.css

Internet Explorer 8和Respond.js

在应用程序中使用Respond.js时，请注意以下注意事项 Internet Explorer 8的开发和生产环境

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

Respond.js和文件：// 由于浏览器的安全规则，Respond.js不能处理页面 通过file://协议查看（如打开本地HTML文件时）。 要测试IE8中的响应功能，请通过HTTP查看页面。看见 有关详细信息，请参阅Respond.js文档

Respond.js和@import Respond.js不适用于通过@import引用的CSS。在里面 特别是，一些Drupal配置已知使用@import。看见 有关详细信息，请参阅Respond.js文档

IE兼容模式 旧的Internet Explorer兼容性中不支持引导 模式。为确保您使用的是IE的最新渲染模式， 考虑在页面中包含适当的标签：

资料来源：

最好以只适用于IE而不适用于任何其他浏览器的方式应用此功能，因为它可能会破坏您的一些响应性网站。本页专门讲述如何应用仅限IE的CSS

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

此外，您需要记住，bootstrap.css位于head部分的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>


引导示例
我还可以复制您的问题。全屏：。你犯了一个错误。行中有嵌套的容器，反之亦然。我还更正了respond.js路径。@Ravimallya-Nop它不是重复的，您的固定示例在IE-8上不起作用。使用col xs-*为我解决了这个问题。非常感谢。 
<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>