Chrome在div内部和我的CSS显示之间添加了奇怪的填充：table
我正在尝试将div（myTable，display:table，div，index，display:block类.index和{{ 1}}）但我遇到Chrome问题。 Chrome在包装器和它所包含的表之间添加了大约一个像素的填充值。这在Edge，Safari或Firefox中不会发生。
奇怪的是Chrome只添加了这个填充：
- 在右侧，
- 和随机宽度。
您可以在下方或此代码中看到它：http://codepen.io/ihatecoding/pen/xgRXMZ
没有奇怪的填充：右边边框是真正的红色：
奇怪的填充：右侧添加填充，由于蓝色的背景颜色而呈现紫色：
在此缩放图像中可以看到蓝色填充：
如果您将浏览器窗口调整为不同的宽度，您会看到在某些宽度上它没有添加填充，而在其他情况下，右边会出现奇怪的填充，您会看到右边缘变成紫色。
但这种变化很难看出来。这个紫色出现在严谨的位置并不是真正的紫色，而只是紫色。容器内的背景颜色为蓝色，只有一个像素，眼睛将其与包含div的红色边框混合。如果将CSS中包含div（display: table）的背景颜色更改为您想要的任何颜色，则可以验证这一点。
请不要建议我删除表格，只显示两个作为表格单元格。如果我只有一个表，这可以工作，但实际上我有一堆表，我在这个包装器中垂直堆叠。 将两个单元格的包装器保持为（table-cell），非常重要，因为我实际上还有其他行，这些行也在我显示为表格中。如果我将它们全部显示为border-right，我的所有行都会在同一行上结束，这不是我想要的。
我已经认识到即使只有一个表也会出现这个问题，正如您在我的示例中所看到的，它不是在div中堆叠表的产物。
你们中的任何人都可以帮助我让Chrome表现出来并停止添加那种奇怪的填充吗？
谢谢！
更新1：如果我的display: block存在，则只会出现奇怪的填充。如果我删除该边框，则填充不会出现。
更新2：如果我将行包装更改为display:table，我会消除这个神秘的空白，但我会打开这个问题，以防有人想要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%;
}友好解决方案。< / p>
更新3：迄今为止提交的唯一答案涉及javaScript。由于我没有说明我想要一个纯CSS解决方案，我会给提交功能答案的用户，但如果您喜欢挑战并看到这个问题，请随时开始推出纯CSS解决方案。谢谢！
<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>{{1}}＆＃13;
2 个答案:
答案 0 :(得分：1)
这是一个圆角问题，由宽度为75％的容器引起。显然，桌子并不擅长填充657.75像素的空间。
一个简单的解决方法是为父div提供与其边框颜色相同的背景颜色，或者与表格的背景颜色相同。但你可能已经考虑过了......
真正的解决方案是将文章的宽度四舍五入为整个像素，这样桌子就可以整齐地填充它，而不会留下三分之一的像素。
这不能用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>
答案 1 :(得分：1)
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>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？