Chrome和Opera在使用display：table时创建小填充

Question

我注意到Chrome（34.0.1847.131 m）和Opera（21.0.1432.67）在使用属性divs时在两个display:table;之间创建了一个小的差距。 （而不是在使用display:block时）

Here's a fiddle再现它。 （调整面板的宽度，不会在每个宽度上进行）

重现它：

HTML

<div class="left"></div>
<div class="right"></div>

CSS

.left {
    left: 0px;
}
.right {
    right:0px;
}
.left, .right {
    width: 50%;
    position: absolute;
    height: 350px;
    background:#000;

    display:table;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;
}

我怎样才能摆脱这种差距？这是某种错误吗？

Answer 1

将table更改为table-cell似乎可以解决问题： http://jsfiddle.net/3z24S/7/

Answer 2

将1 px添加到右侧div的位置：

.right {
    right:1px;
}

http://jsfiddle.net/3z24S/12/

Answer 3

我有两个可能的解决方案：

选项1：

使用css calc();设置两个div的宽度，如下所示：

Working Example 1

.left, .right {
    width: calc(50% + 0.1px); /* Important bit */
    position: absolute;
    height: 350px;
    background:#000;
    display:table;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;
}

选项2：

使用JavaScript设置两个div的宽度，如下所示：

Working Example 2

wid = function () {
    $('.left, .right').width(Math.ceil($(window).width() / 2)); //Math.ceil() will round the value up
};
$(document).ready(wid);
$(window).resize(wid);

如果你可以使用calc()它可能是更好的选择，那么使用JavaScript对于这样的事情来说似乎很昂贵。

Answer 4

如果问题属于vertical-align和已知高度，则可以不使用display:table/table-cell; DEMO ，或者可以不使用absolute {{ {1}}。

您可以使用position，inline-block和伪élément。 HTML：

vertical-align

div.content将是内联块或显示：问题中的表格单元格。

CSS

<div class="left">
  <div class='content'>
    <p>content</p>
  </div>
</div>
<div class="right">
  <div class='content'>
    <p>content</p>
    <p>content</p>
  </div>
</div>

即使回答你的问题，我仍然不明白为什么这个位置：绝对;并且仍然不确定元素是否具有已知高度。看起来您似乎没有使用正确或最佳方法来满足您的需求。

在我看来，像素错误已经在评论中得到了回答，显然铬是处理此显示值的另一种方式。