twitter-bootstrap - 带有引导程序 3 和 IE8 的 respond.js

Question

Inernet Explorer 8有人可以告诉我为什么服务页面上的列宽比它们应该的短吗？它们应该类似于下面的黄色突出显示区域：

我尝试在浏览器堆栈中查看它并在 IE11 中使用仿真模式。我正在使用像Bootstrap docs中所述的respond.js。

我究竟做错了什么？

谢谢

Answer 1

IE8有2个问题：

第一个问题：

<dt>
    <i class="icon-data-consolidation"></i>
</dt>

此<dt>标签在 IE8 上的大小与任何其他浏览器不同。（Firefox、Chrome、Safari 等）。例如在 Mozilla 中它有width = 45px ; height = 45px，在 IE8 中它有width = 160px ; height = 45px;. 因此，由于页面中标签的宽度为 160 像素<dt>，您的设计会崩溃。

第一个问题的解决方案：

将此添加到您的 css 代码中：

.dl-horizontal dt {
    width: 45px !important;
}

第二个问题：

<dd>
    <h5>Data Consolidation</h5>
    <p>Data from disparate systems ...</p>
</dd>

此<dd>标签在 Firefox 中的 margin-left = 45px，但在 IE8 中设置为 180px。

第二个问题的解决方案：

将此添加到您的 css 代码中：

.dl-horizontal dd {
    margin-left: 45px !important;
}

我已经对此进行了测试，并且可以正常工作，希望对您有所帮助。