頁邊距左側在Firefox中無法正常工作

Question

在我的代碼中margin-left:在Firefox和所有其他瀏覽器中以兩種不同方式工作。

在Firefox上，保證金只是「實際」保證金的20％。我試過@-moz-document url-prefix() { }，但它沒有解決問題，它將所顯示的圖像和「汽車開始移動的真實位置」移動到更大的邊緣。

這裏是我的代碼：

<section id="home" >   
    <div id="home1inner"> 
     <div id="header"> 
      *lots of content here* 
     </div> 
     <img id="cars" src="images/cars.png" /> 
    </div> 
</section> 

#home { 
    position: relative; 
    width: calc(100% + 25px); 
    overflow-y: scroll; 
    background-image: url('images/movie_6.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 690px; 
    margin-top: 40px; 
} 
    #home1inner { 
    height: 1550px; 
    overflow: hidden; 
    position: relative; 
}  
    #cars { 
    position: absolute; 
    height: 690px; 
    bottom: -500px; 
    margin-left: -300px; 
    pointer-events: none; 
} 

下面是網站本身，在這裏你可以檢查Firefox和其他瀏覽器之間的區別：http://denea.comeze.com/

任何想法如何解決呢？

Answer 1

在Firefox中，您的cars ID默認爲以頁面爲中心。

只需添加left: 0，像這樣：

#cars { 
    position: absolute; 
    height: 690px; 
    bottom: -500px; 
    margin-left: -300px; 
    pointer-events: none; 
    left: 0; 
} 

，它會在你想要的頁面上的位置開始。