Firefox中的HTML元素位置不同

Question

这是我的design。底部的右箭头在chrome和IE中看起来很好。但在Firefox中，它的立场是不同的。

 #prev{
    background-image: url("http://oi57.tinypic.com/2ztfrx4.jpg");
    background-repeat: no-repeat;;
  }       

  #next{
    background-image: url("http://oi60.tinypic.com/2wpjazt.jpg");
    background-repeat: no-repeat;;
  }

我附上了在Firefox中运行的图像，右箭头位置向下。

我该如何解决这个问题？

Answer 1

您可以使用#next上的负边距修复对齐问题，如下所示。

由于您为图标图像/元素指定了宽度，因此只需将左边距设置为宽度的负值，在本例中为-26px。

此解决方案适用于最新版本的Firefox，Chrome和IE。

#prev {
    background-image: url("http://oi57.tinypic.com/2ztfrx4.jpg");
    background-repeat: no-repeat;
    display:inline-block;
    width:26px;
    height:26px;
}
#next {
    background-image: url("http://oi60.tinypic.com/2wpjazt.jpg");
    background-repeat: no-repeat;
    display:inline-block;
    width:26px;
    height:26px;
    float: right;
    margin-left: -26px;
}
.products {
    border-style: solid;
    border-width: 1px;
    border-color: #98bf21;
    text-align:center;
    white-space:normal;
}

<div id="container">
    <div id="catalog" style="width:300px;height:557px;">
        <div id="logo">
            <img alt="Mountain View" src="http://files.usmre.com/4215/mountain%20view%20lake.jpg" style="width:300px;height:200px;">
        </div>
        <div class="products" id="productTitle" style="width:296px;height:350px; font-size: 24px;"></div>
    </div>
    <div style="position:relative;display:block;padding:0px;margin:0px;white-space:nowrap;width:300px;padding-top:10px">
        <div id="prev"></div>
        <div id="next"></div>
    </div>
</div>