我正在尝试将 CSS 表格(div、myTable 类、display:table)包装在 div (index 和 display:block 的类)，但 Chrome 遇到问题。 Chrome 在包装器和它所包含的表格之间添加了大约一个像素的填充。在 Edge、Safari 或 Firefox 中不会出现这种情况。
奇怪的是 Chrome 只添加了这个填充:
- 在右侧，并且
- 和随机宽度。
您可以在下面或在此代码笔中看到它:http://codepen.io/ihatecoding/pen/xgRXMZ
没有奇怪的填充:右侧边框是真正的红色:
奇怪的填充:右侧添加了填充，由于蓝色背景颜色而呈现紫色:
在此缩放图像中可以看到蓝色填充:
如果您将浏览器窗口调整为不同的宽度，您会发现在某些宽度下效果很好，没有添加填充，而在其他宽度下奇怪的填充出现在右侧，您会看到右边缘变成紫色。
但是这种变化很难看出来。右边出现的这个紫色并不是真正的紫色，只是看起来像紫色。容器内的背景颜色为蓝色，并且眼睛仅在一个像素处将其与包含的 div 的红色边框混合。如果您将 CSS 中包含 div (.index) 的背景颜色更改为您想要的任何颜色，您可以验证这一点。
请不要建议我删除表格并仅将两个显示为表格单元格。如果我只有一张 table ，这会起作用，但实际上我有一堆 table 垂直堆叠在这个包装器内。 重要的是，我将两个单元格的包装器保留为 (display: table)， 因为我实际上在此容器中还有其他行，我也将它们显示为表格。如果我将它们全部显示为 table-cell，则所有行最终都会在同一行上，这不是我想要的。
我已经认识到即使只有一个表也会出现此问题，正如您在我的示例中看到的那样，它不是在 div 内堆叠表的结果。
你们中的任何人都可以帮助我让 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>最佳答案
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>关于html - Chrome 在 div 内部和我的 CSS 显示之间添加奇怪的填充 : table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41704078/