html - Firefox 和 Chrome 之间神秘的 2px 差异

Question

我的问题引用this我一直在开发的网站。看到里面有4个圆圈和4个按钮的地方了吗？这是他们的相关 CSS:

/* STEPS HIGHLIGHT */
.steps {
background: transparent url(img/bg-steps.gif) 37px 92px no-repeat;
    clear: both;
    float: left;
    text-transform: uppercase;  
} 
.steps .col {
    margin-top: 15px;
    text-align: center;
}
.col.steps-1 {
    width: 194px;
}
.col.steps-2 {
    margin-left: 40px;
    width: 196px;
}
.col.steps-3 {
    margin-left: 21px;
    width: 232px;
}
.steps .col.last {
    margin-left: 11px;
    width: 226px;
}
.steps .col.last h3 {
    margin: 0 auto;
    width: 129px;
}
.steps h2 {
    font: 24px 'ProximaNovaLight';
}
.steps h3 {
    color: #7f7f7f;
    display: block;
    font: 14px 'ProximaNovaSemibold';
    height: 20px;
}
.steps p {
    font: 9px 'Arial';
}
.steps .col .icon {
    margin: 28px 0 40px 0;
    position: relative;
    left: 43px;
    width: 98px;
    height: 98px;
}
.steps-1:hover h3,
.steps-2:hover h3,
.steps-3:hover h3,
.steps .col.last:hover h3 {
    color: #c03a2f;
}
.steps-1:hover .icon,
.steps-2:hover .icon,
.steps-3:hover .icon,
.steps .col.last:hover .icon {
    background: transparent url(img/ico-steps-hover.gif) -6px 3px no-repeat;
}
.steps-2:hover .icon {
    background-position: -240px 3px;
}
.steps-3:hover .icon {
    background-position: -457px 3px;
}
.steps .col.last:hover .icon {
    background-position: -700px 3px
}

如您所见，我为圆圈和 <a> 使用了背景图像元素来构建悬停效果。本来，主播是没有背景的。在悬停时，它们被分配了相同的 Sprite 和不同的背景位置。我使用相对定位和边距来定位 <a>元素。

我的问题是 Chrome 和 Firefox 之间存在 2px 差异，这会破坏后者的效果。我不知道差异是否出现在背景位置的边缘或背景位置，也不知道为什么存在。

有没有人遇到过这种问题？为什么会这样？我如何解决它？为了找到解决方案，我已经苦苦挣扎了几个小时。

Answer 1

我可以建议一个更好的实现方法吗？您有 2 个大图像，分别为 21.8K 和 23k。圆形背景只需要一张图片。以及 Sprite 中带有红色悬停状态的图标。你不需要水平线的图像，你可以用纯 CSS 来完成。点击下面的链接。它应该是这样的:fiddle

您的 HTML:

    <div class="anchorSection">
        <div class="circle">
            <a href="#" class="wheel"></a>
        </div>
        <div class="circle">
            <a href="#" class="wheel"></a>
        </div>          
        <div class="circle">
            <a href="#" class="wheel"></a>
        </div> 
        <div class="circle" style="margin-right:0">
            <a href="#" class="wheel"></a>
        </div> 
        <div class="horizontal">
    </div>

和你的 CSS:

      .anchorSection{
            width:838px;
            height:102px;
            position:relative;
        }
        .circle{
            width:99px;
            height:102px;
            background:url("circle.gif");
            float:left;
            margin-right:147px;
            z-index:-1;

        }
        .circle:last-child{
            margin-right:0;
        }
        .circle a{
            width:39px;
            height:39px;
            display:block;
            margin:0 auto;
            margin-top:29px;
        }

        .circle a.wheel{
            background:url("wheel.gif") 0 0 no-repeat
        }
        .circle a.wheel:hover{
            background-position:-39px 0;
        }
        .horizontal{
            position:absolute;
            top:50%;
            border-top:1px solid #cfcfcf;
            border-bottom:1px solid #ececec;
            width:100%;
            z-index:1
        }

我只为您完成了第一个图标，但重复了 4 次。你显然需要做剩下的 3 个图标和它们各自的悬停状态。确保将所有 8 个图标都放在一个 sprite 中，这样您只加载 1 张图像并使用正确的背景位置来为每个图标及其悬停状态获取正确的图像。希望这会有所帮助。