居中的背景圖像和居中的DIV之間的對齊方式不同，具體取決於瀏覽器的寬度

Question

我有一個背景圖片，該圖片的正方形與覆蓋此正方形的div具有相同的大小。 （有一個上帝的原因在這里沒有提到）。 將背景圖片和div居中時，它們在某些瀏覽器寬度上不會重疊。 重新調整瀏覽器大小時，有時背景方塊未對齊1個像素。 如您在下面的示例和JSFiddle中所看到的，有時拖動瀏覽器的寬度時，背景正方形的1像素可見。

有解決方案嗎？ 為什么元素之間的定位不同步？

嘗試重新調整fiddle-view-port的寬度，您會發現發生未對准時，有時可以看到青色背景正方形。

JSFiddle： http : //jsfiddle.net/jj3qxL3k/

碼：

    <div>CONTENT DIV</div>

的CSS

    div{
        background-color: yellow;   
        width: 800px;
        margin: 0 auto;
    }
    html{
        background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
        margin: 0;
        padding: 0;    
    }
    body{
        margin: 0;
        padding: 0;
    }

嘗試了一下，沒有任何運氣：

    /* Fix form centering background input chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        html {
            margin-left: 1px;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body {
            background-position: 50.001% 0;
        }
    }

順便說一下，這對於我來說是Chrome版本43.0.2357.81 m。

Answer 1

這取決於瀏覽器處理不均勻值以及對齊背景和內容的方式。

當容器的寬度值為奇數時會發生這種情況，因為容器內的元素的寬度值為偶數。 例如，如果您的元素為800px寬，而容器為855px寬，則元素周圍將留有855-800 = 55px的空間，現在瀏覽器必須將其划分為兩側。 它將每邊減少到22.5像素，但是由於無法繪制半像素，因此必須對數字進行四舍五入。 因此，元素的一側將變為23px，另一側將為22px。

現在可以爭論的是，背景圖像本身的處理方式相同，因此對齊方式應該相同，但是實際上，這完全取決於瀏覽器的構建方式，這就是為什么在不同的瀏覽器中獲得不同結果的原因。

在沒有看到實際項目的情況下建議解決方法相當困難，因為它可能必須全部是一個不同的解決方案。