3

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

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

4

5 回答 5

5

我可以建议一种更好的方法来实现这一点吗？您有 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 个图像并使用正确的背景位置来为每个图标及其悬停状态获取正确的图像。希望这可以帮助。

于 2012-07-17T19:10:10.020 回答
5

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

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

.steps h2 {
    height: 26px;
}

这是最快的“修复”。

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

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

该站点的另一个问题是您在文档类型上方有一个 HTML 注释，这会导致怪癖模式（即使在 Firefox 中）。

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

删除评论！

于 2012-07-17T14:27:41.103 回答
1

在你的CSS上添加这个：

* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
于 2013-04-23T11:12:13.850 回答
0

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

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

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

于 2012-07-17T20:16:46.900 回答
-1

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

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

于 2012-07-17T14:34:23.867 回答