HTML元素在Firefox中的位置不同
HTML元素在Firefox中的位置不同
提问于 2015-07-16 02:14:17
这是我的设计。底部的右箭头在铬和IE中看起来很好。但在火狐，它的地位却是不同的。
#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中运行的图像，并且正确的箭头位置是向下的。
我怎么才能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-16 02:21:02
您可以使用#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31444300
复制相关文章
相似问题
腾讯云开发者
