-1

我想知道为什么 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

4

2 回答 2

0

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

虽然我不完全理解为什么会在某些浏览器而不是其他浏览器上发生这种情况，以及为什么会在某些缩放级别而不是其他浏览器上发生（至少在我笔记本电脑上 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>

于 2021-01-02T09:03:42.133 回答
0

嘿兄弟，有许多过渡和样式仅适用于 chrome 而不是 Firefox，firefox 也是如此，（许多过渡适用于 firefox 但不适用于 chrome）所以事情是，chrome 和 firefox 有一些不同的属性所以您必须在官方文档或谷歌上搜索以检查哪些属性可以在 chrome 上运行，哪些可以在 Firefox 上运行

希望这是有道理的

我将附上一个代码片段，显示不同浏览器的不同转换属性

text.identity{
   transform: translate(74px,0px);
   -ms-transform: translate(74px,0px); /* IE 9 */
   -webkit-transform: translate(74px,0px); /* Safari and Chrome */
   -moz-transform: translate(74px,0px); /* Firefox */
   -o-transform: translate(74px,0px); /* Opera */

}

这些是不同浏览器的一些转换属性，这只是一个示例，这些行的工作方式相同，但在各自的浏览器上

编码快乐！！

于 2021-01-02T00:16:30.133 回答