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>元素来构建悬停效果。最初，锚没有背景。在悬停时，它们被分配相同的精灵和不同的背景位置。我使用相对定位和边距来定位<a>元素。

我的问题是Chrome和Firefox之间存在 2px差异正在打破后者的影响。我不知道差异是出现在背景位置的边缘，也不是为什么存在。

之前有没有人遇到过这种问题？为什么会这样？我如何解决它？我一直在努力寻找解决方案几个小时。

Answer 1

在Firefox中，自定义字体“ProximaNovaLight”未加载，因此h2内的.steps元素的高度与Chrome中的高度略有不同。

在Chrome中，h2的计算高度为26像素，而在Firefox中则为30像素。添加此CSS可使Chrome和Firefox保持一致：

.steps h2 {
    height: 26px;
}

这是最快的“修复”。

根本问题是h2 的高度完全不同。您实施网站这一部分的方式并不健全。您在.steps上将整个“非活动”图像作为背景图像，但随后在每个<a class="icon">元素中分别放置了“活动”图像。这很容易破裂。

例如，即使在目前可能正常工作的Chrome中，也请尝试放大一点，然后悬停。图像在四处摇晃。

该网站的另一个问题是您在doctype上方有HTML注释，这会导致quirks mode（甚至in Firefox）。

<!-- BEGIN WP_HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

删除评论！

Answer 2

我可以建议一个更好的实现方法吗？你有2张21.8K和23k的大图像。圆形背景只需要1张图像。和一个红色悬停状态的图标在精灵中。并且您不需要水平线的图像，您可以使用纯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个图标放在精灵中，这样您只需加载1个图像并使用正确的背景位置为每个图标及其悬停状态获取正确的图像。希望这会有所帮助。

Answer 3

在你的css上添加：

* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

Answer 4

行。下载了所有资源，并确认即使在未加载webfont的情况下，问题确实也会出现在Chrome中，就像在Firefox中一样。（简单地停用开发工具中的字体不能用于复制它，因为元素大小已经在你这样做时已经建立。）因此，我们可以回答“为什么它会在Firefox中发生而不是Chrome？ “明确地说：它是字体。因此，如果您可以在FF中正确加载字体，问题就解决了。

如何修复？通过将背景分配给两个不同的元素，您将使您的生活更加困难。（主要背景位于.steps，:hover背景位于.col子元素上。）当您只是在同一元素上交换背景时，总是更容易排列。我将水平线作为.steps上的背景，然后将圆形徽章图标应用于.col div。这样，无论页面的其余部分如何回流，它们仍将彼此对齐，最坏的情况是背景线略微偏离中心。但...

但为什么会在这里发生？这是因为我无法下载您的webfont文件以进行进一步测试，这是因为您的.steps h2样式未提供明确的高度，而高度是根据字体特征在渲染时确定的。当webfont存在时，该元素的高度为26px。当它丢失时，高度为28px。如果您明确将高度设置为28px，则可以覆盖并计划任何一种情况。当我将该高度设置为28px，然后将图标':hover条件的背景偏移设置为-15px而不是当前33px时，一切似乎都有效。当我在开发工具中对您的生产网站进行这些更改时，它似乎适用于Chrome和Firefox，无论是否有webfont。

Answer 5

为什么不使用重置样式表来均衡两个浏览器，然后应用样式。

http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

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

5 个答案: