Chrome 奇怪的 CSS 問題，在 Firefox 上工作正常

Question

我想知道為什么 Chrome 和 Firefox 在渲染 CSS 時存在顯着差異。在 Chrome 的情況下，子元素沒有占據完整的寬度和高度（可以在子元素的頂部和左側看到父元素的黑色）。 在 Firefox 的情況下，邊緣是光滑的，子尺寸與父尺寸相同。 我不知道為什么會這樣。

這些是 Chrome 和 Firefox 上的屏幕截圖來演示：

鉻合金：

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：啟用時使用硬件加速

Answer 1

Hey brother there are many transitions and stylings that works on only chrome and not on the Firefox, same is the case with firefox, (many transitions work on firefox but not on chrome) so the thing is, chrome and firefox has some different properties so您必須在官方文檔或谷歌上搜索以檢查哪些屬性適用於 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 */
   

}

這些是不同瀏覽器的一些轉換屬性，這只是一個示例，這些行的工作方式相同，但在各自的瀏覽器上

編碼快樂！！

Answer 2

由於在父項上設置了邊框，因此似乎出現了黑線。

雖然我不完全理解為什么會在某些瀏覽器上而不是其他瀏覽器上發生這種情況，以及為什么會在某些縮放級別而不是其他瀏覽器上發生（至少在我筆記本電腦上 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>

Answer 3

我以前遇到過這個問題，在某些情況下，當我們使用絕對 position 時，它不適合某些瀏覽器中的相對框，因此解決方案是您可以在具有絕對 position 的元素中添加 outline 屬性。

請檢查以下代碼：-

.child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: lightcoral;
    outline: 1px solid #fff;
}

只需用上面的代碼替換您的子元素 css 並讓我知道它是否有效。