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

Posted 2023-03-05

【中文标题】Chrome 和 Opera 在使用 display:table 时创建小填充

【英文标题】：Chrome and Opera creating small padding when using display:table

【发布时间】：2014-07-03 17:40:39

【问题描述】：

我注意到，在使用属性 display:table; 时，Chrome (34.0.1847.131 m) 和 Opera (21.0.1432.67) 在两个 divs 之间创建了一个小间隙。 （例如，在使用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;

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

【问题讨论】：

最后的问题:)

无法绘制半像素，因此如果您的宽度为奇数，则 chrome 中缺少 1px，而在 ff 中，它似乎被赋予了一个或另一个容器：jsfiddle.net/3z24S/4跨度>

@GCyrillus 如果我将属性设置为display:block：jsfiddle.net/3z24S/5，为什么不会发生？

hm.. 以@GCyrillus 的评论为基础，避免该问题，您可以将其中一个块设置为 51%。

【参考方案1】：

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

【讨论】：

但我无法将其更改为 table-cell... 我需要 table。

为什么display 属性需要table 值？你甚至不需要display 就可以让它按你的意愿工作。

@MattSmith 将内容垂直居中（在内部表格单元格内）并获得 100% 的容器。 （哪个表格单元没有）

好吧，正如@GCyrillus 在上面的 cmets 中所说，“无法绘制半像素，所以如果你的宽度为奇数，则 chrome 和 ff 中缺少 1px给一个或另一个容器”——使用table-cell 时解决了这个问题，因为他们知道共享宽度，这会导致额外的像素被分配到一个/或。你真的应该重新考虑你做这个布局的方式。

OP 需要 display:table 作为其模板的一部分。

【参考方案2】：

如果是vertical-align 和已知高度的问题，您可以不使用display:table/table-cell; DEMO，也可以不使用absolute position。

您可以使用inline-block、vertical-align 和伪元素。 html：

<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>

div.content 将是 inline-block 或 display:table-cell 在您的问题中。

CSS

.left 
    left: 0px;

.right 
    right:0px;

.left, .right 
    width: 50%;
    position: absolute;
    height: 350px;
    background:#000;
    color:white;
    border-spacing:0;
    border:0;
    margin:0;
    padding:0;

.left:before,
.right:before ,
.content 
  display:inline-block;
  vertical-align:middle;
  max-width:95%;

.left:before,
.right:before 
  content:'';
  height:100%;
  width:0;

即使在这里回答你的问题，我仍然不明白为什么 position:absolute;并且仍然不确定元素是否应该具有已知的高度。看起来您没有使用正确或最佳的方法来满足您的需求。

在我看来，像素错误已经在 cmets 中得到了解决，而且显然是 chrome 处理此显示值的另一种方式。

【讨论】：

您不能为.content 设置width:100% 吗？ jsfiddle.net/PzNf7/1 那里有个缺口。

@Alvaro ，是的，如果您在父项上将 font-size 重置为 0 以避免在伪和 .content 之间出现空白，则可以。 jsfiddle.net/PzNf7/2

谢谢，但对于我来说，让它作为模板正常工作听起来有点乏味。我相信我最终会选择将0.1px 的边距添加到右侧面板并继续使用我的table 结构来使内容居中。

嗯，你有足够的信息和 cmets 来选择你想要做什么，我想说这一直取决于你 :)

【参考方案3】：

在右侧 div 的位置上加 1 px：

.right 
    right:1px;

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

【讨论】：

看起来是一个非常简单的解决方案。添加right:0.1px 似乎也可以。

您不能使用 .1px...尝试使用 .1em 或 rem，因为这些单位可以使用小数位和小数单位进行调整。这是一个奇怪的问题，似乎在一些铬错误报告中以迂回的方式触及。没有什么具体的，但肯定在该地区。毫无疑问，chrome 中的display:table; 设置存在问题。如果您觉得它对您很有帮助，并且解决了您的问题，请随时接受。

是的，现在我会 :) 谢谢！赏金需要一小时。

【参考方案4】：

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

选项 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 似乎很昂贵。