时间戳

首页 > 解决方案 > Chrome 奇怪的 CSS 问题，在 Firefox 上运行良好

html - Chrome 奇怪的 CSS 问题，在 Firefox 上运行良好

问题描述

我想知道为什么 Chrome 和 Firefox 在渲染 CSS 方面存在显着差异。在 Chrome 的情况下，子元素没有占用完整的宽度和高度（可以在子元素的顶部和左侧看到父元素的黑色）。在 Firefox 的情况下，边缘是平滑的，并且子级的尺寸与父级相同。我不知道为什么会这样。

这些是用于演示的 Chrome 和 Firefox 上的屏幕截图：

铬合金：

谷歌浏览器

火狐：

在此处输入图像描述

下面是我的代码：

* {
  margin: 0;
  padding: 0;
}

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  border: 10px solid white;
  background-color: black;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: lightcoral;
}
<div class="parent">
  <div class="child">Content</div>
</div>

我只想知道为什么会发生这种情况以及如何修复它以使其在所有浏览器中看起来都一样。

PS：在可用时使用硬件加速是ON

标签： htmlcssgoogle-chromefirefoxfrontend

解决方案

由于在父项上设置了边框，因此似乎出现了黑线。

虽然我不完全理解为什么会在某些浏览器而不是其他浏览器上发生这种情况，以及为什么会在某些缩放级别而不是其他浏览器上发生（至少在我笔记本电脑上 Windows 10 上的 Chrome/Edge 上），但我怀疑这是因为浏览器计算 CSS 边框的边界。

我们没有看到完整的 CSS 像素，而是看起来更纤细的，可能只有一个屏幕像素宽度的黑色线条。当缩放增加或减少时，这可能会消失，或者显示在右侧/底部而不是左侧/顶部边框。就好像根据屏幕像素计算边框实际位置的算法采用例如用于一个 CSS 像素的 n 个屏幕像素并采用中点。我还没有找到任何关于使用什么算法的解释。

无论如何，在这种实际情况下可能会或可能不会有帮助的一个观察结果是，如果将边框替换为边距，则没有黑线。

    * {
      margin: 0;
      padding: 0;         
    }

    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: black;
      /*border: 10px solid white;*/
      margin: 10px;
    }
    
    .child {
      position: absolute;
      top: 0%;
      left: 0%;
      height: 100%;
      width: 100%;
      background-color: lightcoral;
    }
    <div class="parent">
      <div class="child">Content</div>
    </div>

推荐阅读