Question

在chrome中打开以下网址 www.nextag.com/camera/stores-html 并刷新页面

请注意右上角邮政编码旁边的帮助图标位置。它未对齐现在在firefox中打开相同..它已正确对齐..

CSS代码如下：

background: none repeat scroll 0 0 white;
border: 1px solid #C2CCCC;
border-radius: 4px 4px 4px 4px;
color: #C2CCCC;
display: block;
float: right;
font-weight: bold;
height: 13px;
margin-left: 4px;
text-align: center;
width: 12px;
padding-right: 1px;

使它在firefox中工作..我添加了以下3个属性：

position: relative;
top: -15px;
left: 18px;

然后它开始在chrome中工作正常，但现在它在firefox中没有对齐..我该怎么办？

Answer 1

您是否尝试过使用“ position：absolute ”属性而不是“ position：relative ”？

似乎Firefox有一个不可见的填充或边距，将元素放在文本空间的右上角。 Chrome将元素放置在文本流之外的fieldset元素的右上角。

你可以做一件事添加一个div包装器，然后绝对将元素放在包装器的右上角。

希望这有帮助。

Answer 2

添加属性float:left

.rb #zipTxt a {
color: #2283AB;
font-size: 12px;
font-weight: bold;
float: left;
}

Answer 3

你在A里面有一个SPAN。只需禁用“float：right”属性并添加“display：inline”

.rb span.zip-info {
    dispay: inline;
    float: none;
}

在firefox和chrome中查看时网站外观的差异

3 个答案: