Chrome 在 div 和我的 CSS 显示之间添加奇怪的填充：table
Chrome adding weird padding between inside of div and my CSS display: table
我正在尝试将 CSS table（div、class of myTable、display:table）包裹在 div（index 和 display:block 的 class），但 Chrome 有问题。 Chrome 在包装器和它包含的 table 之间添加了大约一个像素的填充。这不会发生在 Edge、Safari 或 Firefox 中。
奇怪的是 Chrome 只添加了这个填充：
- 在右侧，
- 和随机宽度。
您可以在下方或此代码笔中查看：http://codepen.io/ihatecoding/pen/xgRXMZ
没有奇怪的填充：右手边框是真正的红色：
奇怪的填充：右侧添加填充，由于背景颜色为蓝色而呈现紫色：
蓝色填充在此缩放图像中可见：
如果您将浏览器 windows 调整为不同的宽度，您会发现在某些宽度下它很好，没有添加填充，而在其他宽度下奇怪的填充出现在右侧，您会看到右边缘变成紫色。
但这种变化很难see.This出现在右边的紫色并不是真正的紫色，而只是呈现为紫色。容器内的背景颜色是蓝色，眼睛仅在一个像素处将其与包含 div 的红色边框混合在一起。如果将 CSS 中包含 div (.index) 的 background-color 更改为您想要的任何颜色，则可以验证这一点。
请不要建议我删除 table，只将两者显示为 table-cells。如果我只有一个 table，这会起作用，但实际上我有一堆 table，我在这个包装器内垂直堆叠。 重要的是我将两个单元格的包装器保持为 (display: table), 因为实际上我在这个容器中还有其他行，我也显示为 table秒。如果我将它们全部显示为 table-cell，我所有的行最终都在同一行，这不是我想要的。
我已经认识到即使只有一个 table 也会出现此问题，正如您在我的示例中看到的那样，它不是 table 在 [=94] 中堆叠的产物=].
你们中的任何人都可以帮助我让 Chrome 表现出来并停止添加奇怪的填充吗？
谢谢！
更新 1：奇怪的填充只有在我 border-right 出现时才会出现。如果我删除该边框，则填充永远不会出现。
更新 2：如果我将行包装器更改为 display: block，我消除了神秘的差距，但我会保留这个问题，以防有人想要 display:table 友好的解决方案。
更新 3：目前提交的唯一答案涉及 javaScript。由于我没有指定我想要一个纯粹的 CSS 解决方案，我会给提交功能性答案的用户信用，但如果你喜欢挑战并看到这个问题，请随时开车推导出一个纯粹的CSS 解决方案。谢谢！
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display:block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<body>
<article id="post-1" >
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017 </div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths </p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want. </p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells, they all end up on the same line, which is not what I want. </p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
</body>
这是一个舍入问题，由宽度为 75% 的容器引起。显然 table 不擅长完全填充 space，例如 657.75 像素。
一个简单的解决方法是为父级 div 提供与其边框颜色相同的背景颜色，或与 table 的背景颜色相同的颜色。但你可能已经考虑过那些...
真正的解决办法是将文章的宽度四舍五入为整像素，这样 table 就可以整齐地填充它，而不会留下四分之三像素。
这不能用 CSS 来完成，所以我们需要 JavaScript.
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is
blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: inline-block;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container
is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
我正在尝试将 CSS table（div、class of myTable、display:table）包裹在 div（index 和 display:block 的 class），但 Chrome 有问题。 Chrome 在包装器和它包含的 table 之间添加了大约一个像素的填充。这不会发生在 Edge、Safari 或 Firefox 中。
奇怪的是 Chrome 只添加了这个填充：
- 在右侧，
- 和随机宽度。
您可以在下方或此代码笔中查看：http://codepen.io/ihatecoding/pen/xgRXMZ
没有奇怪的填充：右手边框是真正的红色：
奇怪的填充：右侧添加填充，由于背景颜色为蓝色而呈现紫色：
蓝色填充在此缩放图像中可见：
如果您将浏览器 windows 调整为不同的宽度，您会发现在某些宽度下它很好，没有添加填充，而在其他宽度下奇怪的填充出现在右侧，您会看到右边缘变成紫色。
但这种变化很难see.This出现在右边的紫色并不是真正的紫色，而只是呈现为紫色。容器内的背景颜色是蓝色，眼睛仅在一个像素处将其与包含 div 的红色边框混合在一起。如果将 CSS 中包含 div (.index) 的 background-color 更改为您想要的任何颜色，则可以验证这一点。
请不要建议我删除 table，只将两者显示为 table-cells。如果我只有一个 table，这会起作用，但实际上我有一堆 table，我在这个包装器内垂直堆叠。 重要的是我将两个单元格的包装器保持为 (display: table), 因为实际上我在这个容器中还有其他行，我也显示为 table秒。如果我将它们全部显示为 table-cell，我所有的行最终都在同一行，这不是我想要的。
我已经认识到即使只有一个 table 也会出现此问题，正如您在我的示例中看到的那样，它不是 table 在 [=94] 中堆叠的产物=].
你们中的任何人都可以帮助我让 Chrome 表现出来并停止添加奇怪的填充吗？
谢谢！
更新 1：奇怪的填充只有在我 border-right 出现时才会出现。如果我删除该边框，则填充永远不会出现。
更新 2：如果我将行包装器更改为 display: block，我消除了神秘的差距，但我会保留这个问题，以防有人想要 display:table 友好的解决方案。
更新 3：目前提交的唯一答案涉及 javaScript。由于我没有指定我想要一个纯粹的 CSS 解决方案，我会给提交功能性答案的用户信用，但如果你喜欢挑战并看到这个问题，请随时开车推导出一个纯粹的CSS 解决方案。谢谢！
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display:block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<body>
<article id="post-1" >
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017 </div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths </p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want. </p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells, they all end up on the same line, which is not what I want. </p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
</body>
这是一个舍入问题，由宽度为 75% 的容器引起。显然 table 不擅长完全填充 space，例如 657.75 像素。
一个简单的解决方法是为父级 div 提供与其边框颜色相同的背景颜色，或与 table 的背景颜色相同的颜色。但你可能已经考虑过那些...
真正的解决办法是将文章的宽度四舍五入为整像素，这样 table 就可以整齐地填充它，而不会留下四分之三像素。
这不能用 CSS 来完成，所以我们需要 JavaScript.
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is
blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: inline-block;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container
is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>