Bootstrap 3在Internet Explorer中出现问题

Question

我的HTML如下：

<div class="container">    
    <div class="row">
        <div class="col-lg-6" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="col-lg-4" >
            <img class="img-responsive " src="images/image1.png"></img>
        </div>
    </div>
</div>

这在chrome和firefox中完美运行，row类内部的div并排放置，我得到左侧文字和右侧图片。但是在测试Internet Explorer (ie8)时，具有col-lg-6类的div占据了整个屏幕宽度，col-lg-4类也是如此。

百分比中的样式width:60％或类似的样式似乎无法被Internet Explorer识别。但是我没有在任何地方显式定义容器宽度。在bootstrap.css中，它自动适应每个大小。

如何在Internet Explorer上正确地使其工作？谢谢。

- sharmacal

---

你使用过 shim 和 response.js 吗？ - Dznr

@Dznr 是的，我使用了html5shiv.js和respond.min.js。 - sharmacal

请看这里：http://www.telegraphicsinc.com/2013/10/using-bootstrap-3-with-internet-explorer-8-ie8/ - Dznr

@Dznr 尝试了，但问题仍然存在。 - sharmacal

你看过这里吗：http://twbs.github.io/bootstrap/getting-started/#browsers。Internet Explorer 8和Respond.js。 - Dznr

Answer 1

尝试将此代码放在头部区域中使用

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

- mcmac

Answer 2

回答这个问题已经太晚了。现在我才发现这个问题。对我来说，它已经解决了。尝试使用：

将.col-xs-12添加到您的响应式图像中。

检查链接 http://www.bootply.com/116378

- Shyam Renjan