Question

我正在使用基于引导程序的站点。我有一个问题，我们试图让两列高度相等，尽管列内的内容大小，并且没有设置列高（以保持响应）。

我已经搜索了我的大脑并决定 display：table ， display：table-cell 是解决此问题的合适方法（我们支持IE9，因此Flexbox是OUT，负边距/填充物会破坏响应性）。我有特定的媒体查询来根据屏幕大小修复响应性。

但是，我在Safari的较小列的左侧看到一个看似填充的单个像素（在IE，Chrome，Firefox和Edge中看起来很完美）。在查看检查器之后，我可以看出它不是导致像素的边距或填充，所以我不确定如何修复它。我试过 border-collapse：collapse 无济于事。如果我删除了 display：table 或 display：table-cell ，它看起来是正确的，但我需要这些列使列高度相同（see example here）。有任何想法吗？代码如下。

<style>
.row-tbl {
    display: table;
}
.col-tbl-cell {
    float: none;
    display: table-cell;
}
.blue-bg {
    background-color: blue;
}
.white-bg {
    background-color: white;
}
</style>


<div class="row row-tbl">
    <div class="col-md-4 col-tbl-cell blue-bg">
        <!-- This displays as a table cell -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="col-md-8 white-bg">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac tempus sem, nec luctus tellus. Integer erat urna, fermentum sit amet porttitor at, rhoncus non arcu. Aenean a libero consectetur metus imperdiet scelerisque at ut nibh. Sed mauris mauris, facilisis nec nulla at, cursus imperdiet magna.</p>
    </div>
</div>

Answer 1

我无法使用上面的代码示例在OS X 10.11.2上的Safari 9中重现此问题，但它可能是某种舍入错误。

http://cruft.io/posts/percentage-calculations-in-ie/

您可以尝试将左列的背景颜色应用于行本身。如果它消失，那么它可能是一个子像素渲染问题。

注意：我认为你错过了第二列的col-tbl-cell课程;）

Answer 2

我最终将row-tbl类拉到行下方和列上方的新div上。那很有效！

使用display：table时，需要删除Safari中显示的额外像素

2 个答案: