当 Firefox 不支持时，Chrome 在 div 之间添加灰色分隔符答案

【问题标题】：Chrome adds grey seperators between divs when firefox doesn't当 Firefox 不支持时，Chrome 在 div 之间添加灰色分隔符
【发布时间】：2019-06-11 02:20:19
【问题描述】：

我还没有找到答案。

我用 div 制作了这个列表。所有 div 的边框和轮廓都设置为 0。

现在，当我在 Firefox 中查看它时，它看起来就是我想要的样子：灰白切换，无边框。

但是当我使用 Chrome 浏览相同的东西时，它只是添加了这些不适合我的设计的灰色边框。

我真的不知道为什么 Chrome 会这样做。我希望你们中的任何人都可以帮助我。

谢谢，大卫

我已经添加了一个 normalize.css 文件，但这没有帮助。

这是页面： https://gmod-lsm.com/l/demo.php?u=5c3fa6c18685f&steamid=%s

我说的是组成列表的 div class="rules-info" 和 div class="rules-item"。

我真的不知道那些灰色边框是从哪里来的。据我所知，不是来自我的CSS。它们与 Chrome 有关。

【问题讨论】：

你可以加.rules-item { margin-top: -1px;} 但老实说我不知道为什么会有距离。大卫 3 ;-)

标签： css google-chrome firefox browser

【解决方案1】：

我会添加background:#fff 而不是transparent，这似乎可以解决您的问题。

.rules-info {
    display: inline-block;
    background: #fff;
    vertical-align: top;
    width: 362.19px;
    margin: 0 10px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
}

【讨论】：

这是一种解决方法，而不是真正的解决方案。为了避免混淆我们的名字：叫我大卫 3，这里全是大卫 ;-)
虽然问题是像素中有小数点，但这个答案仍然对我有帮助，因为奇怪的是 Sotkra 并没有在任何地方工作。我刚刚添加了白色背景，灰色线条消失了。谢谢

【解决方案2】：

问题是您有很多带有十进制值的高度和填充。例如，在视网膜屏幕中，您会看到这些小数之间的间隙。请记住，您不应该划分像素。

我做了一个实验，给父容器设置了红色的背景色，不出所料，缝隙变成了红色：

也许 Firefox 正在四舍五入其中的一些值，但是，为什么首先要有它们？

我想你有某种自动网站构建器在做这个奇怪的计算？

【讨论】：

谢谢！这实际上解决了这个问题。尽管在较小的屏幕分辨率（@media screen and (max-width: 1152px), screen and (max-height: 745px)）上删除了所有小数，但仍然会发生这种情况。我只是将 .rules-info 的背景设置为白色，这也解决了这个问题（感谢 David 2 :)）
不仅是宽度和高度，还有小数填充。这些小数总是会导致那些微小的变量故障。