Question

在我的代码中margin-left:在Firefox和所有其他浏览器中以两种不同的方式工作。

在Firefox上，保证金仅为＆＃34;真实＆＃34;的20％。余量。我尝试了@-moz-document url-prefix() { }，但它没有解决问题，它移动了显示的图像和汽车开始移动的真实位置＆＃34;更大的利润。

这是我的代码：

<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;
}

它将从你想要的页面上的位置开始。

Margin-left在Firefox中无法正常工作

1 个答案: