Background-image 1px shift

Question

我正在開發我的第一個網站，並且遇到像素移位的問題。

這裏是我的html：

<section class="hero-section text-center"> 

    <div class="container"> 
    <h1>Monetize Your Content</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <button class="btn btncta"><a href="#">Start Your <strong>Free</strong> Trial</a></button> 
    <p class="small">Available On</p> 
    <i class="fa fa-windows fa-2x"></i> 
    <i class="fa fa-apple fa-2x"></i> 
    <i class="fa fa-linux fa-2x"></i> 
    </div> 

</section> 

<section id="features"> 
    <div class="row"> 
    <div class="col-md-4 text-center"> 
     <div class="feature-inner"> 
     <i class="fa fa-search fa-4x "></i> 
     <h3>Search Anywhere</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     <p class="learnmore-a">Learn More ></p> 
     </div> 
    </div> 

CSS（而不是整個事情）：

.hero-section{ 
    padding: 100px 0 70px 0; 
    background: @color-herosec url('../images/hero_bg.png') no-repeat center bottom; 
    width:100%; 
} 

#features{ 

    background: url(../images/separator-inverted.png) no-repeat top center, url(../images/separator.png) no-repeat bottom center; 
    padding:50px 10px 50px 10px; 
} 

結果應該是這一個，但沒有上的分隔符的是1px的轉變：

https://www.dropbox.com/s/zbxbhr1iqsz6b6j/Screenshot%202014-10-01%2021.02.28.png?dl=0

我已經試過此修復程序：

html { 
    margin-left: -1px; 
    overflow-Y: scroll; 
} 

但結果仍然是一個移動的背景圖像（會有一些偏差，但仍流離失所）：

https://www.dropbox.com/s/mxklaez760vvbmk/Screenshot%202014-10-01%2021.04.45.png?dl=0

任何人都知道如何解決這個奇怪的錯誤？

我見過有關div寬度和圖像寬度的東西，但我沒有掌握它，也沒有它的工作。

我向那

Answer 1

OK，有很多可能性，並解答您的問題，我在本地引導版本嘗試它工作得很好。看起來你還有其他的東西會影響輸出，所以這裏有另一種方法來達到你想要的效果：

1）將圖像切成一個完整的圓圈（不是你現在的半個圓圈），使它透明，所以圓圈的中心是藍色，外部是白色的，就像你有 2）在你的頂部和底部div之間加一個div（注意，這個方法也可以用於導航目的）。給它添加一個類名。 3）讓我們假設你的圈子形象是100px的，你的div名稱是「質」，讓你的CSS是：

.interstitial{width:100%; height:100px; background:transparent url(circle.png) no-repeat 50%; top:-50px} 

和你去那裏，防彈跨瀏覽器的方法有兩個div之間的分離工作。但是，你可能會發現你的最終元素會有一個完整的圓圈（我不知道你是否會繼續使用它），所以如果你打算在更多的div中使用它，那麼你想「砍」它，只需在div名稱（比方說）interstitial2然後：

.interstitial2{width:100%; height:100px; background:transparent url(circle.png) no-repeat top center; top:-50px} 

是的，這比直接解決方案，我昨天給你更令人費解的一點，但是，自從你」有問題，在這裏你有一個無問題的解決方案。