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

Posted 2023-05-08

【中文标题】Firefox 和 Chrome 之间的神秘 2px 差异

【英文标题】：Mysterious 2px difference between Firefox and Chrome

【发布时间】：2012-06-25 00:41:31

【问题描述】：

我的问题涉及到我一直在开发的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 差异，这破坏了后者的效果。我不知道差异是否出现在背景位置的边距中，也不知道为什么存在。

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

【问题讨论】：

P.S：我仍然无法阅读您的所有建议，也无法检查它们，我一直很忙，该项目出于某种原因处于待机状态。不过，问题并没有解决。如果有任何效果，我会尽快通知您。

【参考方案1】：

我可以建议一种更好的实现方式吗？您有 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 个图标放在一个 sprite 中，因此您只加载 1 个图像并使用正确的背景位置来为每个图标及其悬停状态获取正确的图像。希望这会有所帮助。

【讨论】：

在这个答案中，a 元素的命中区域与应有的区域相比很小。与原网站相比，点击区域覆盖整个外圈（即使在网站上，它也应该覆盖外圈上方的文字）。可以对您的答案进行一些其他改进，但它们并不那么重要。

@thirtydot 你是对的。我已经更新了 jsfiddle 以反映 jQuery 的这一变化。 jsfiddle.net/9YTAJ/2 这可以在没有 jQuery 的情况下通过将锚标记的高度和宽度设置为其父标记的大小来完成。他也可以对圆圈上方的区域使用相同的技术。

您可以删除 jQuery 并将选择器更改为：.circle:hover a.wheel。

我最喜欢这个答案。虽然它不是最快的解决方法，但它确实可以更好地管理图像并与网页，无论字体大小或字体系列。出于这个原因，我将赏金授予你萨米。哦，很高兴看到您最近的 jsFiddle 修订版/3/ 仅使用 CSS 完成，这要归功于三十多点的建议，但使用 /2/ 可以实现可能尚未考虑的复杂 jQuery 动画。干杯！

【参考方案2】：

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

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

.steps h2 
    height: 26px;

这是最快的“修复”。

根本的问题是h2 的高度完全不同。您实现网站这一部分的方式并不可靠。您将整个“非活动”图像作为.steps 上的背景图像，但随后您将“活动”图像单独定位在每个<a class="icon"> 元素中。这很容易坏。

例如，即使在 Chrome 中它现在应该可以工作，尝试放大一点然后悬停。图像晃动。

---

该网站的另一个问题是您在文档类型上方有一个 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">

删除评论！

【讨论】：

关于BEGIN WP_HEADER的注释：不必删除，只要与<!DOCTYPE>在同一行即可。

【参考方案3】：

在你的 CSS 中添加这个：

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

【参考方案4】：

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

否则如何解决？通过将背景分配给两个不同的元素，您的生活变得更加困难。 （主背景在.steps 上，:hover 背景在.col 子元素上。）当您简单地在同一元素上交换背景时，排列起来总是更容易。我将水平线设为.steps 的背景，然后将圆形徽章图标都应用于.col div。这样，无论页面的其余部分如何重排，它们仍然会相互对齐，最坏的情况是背景线会稍微偏离中心。但是……

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

【讨论】：

你解释的琐碎点太多了。最好先给出答案，然后是一段解释。在这种情况下，一个就足够了。

【参考方案5】：

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

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

【讨论】：

只是好奇，为什么你认为重置很糟糕？

我也不喜欢重置，但我喜欢Normalize.css。但是，重置在这里一点用都没有。

我也很好奇为什么重置很糟糕。

我，三岁，很好奇。如果它有效并且没有任何副作用，为什么不呢？ @thirtydot 感谢 Normalize.css 的链接。

因为重置是多余的（normalize.css 的全部内容）。