Firefox和Chrome之間2px的神秘差異

Question

我的問題是我一直在開發的這個網站。 看到里面有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>元素。

between Chrome and Firefox that is breaking the effect in the latter. 我的問題是Chrome和Firefox之間存在，從而打破了后者的效果。 我不知道這種差異是否出現在背景位置的頁邊距ou中，為什么存在。

以前有人遇到過這種問題嗎？ 為什么會這樣呢？ 我如何解決它？ 我一直在努力尋找解決方案的時間長達數小時。

Answer 1

在Firefox中，自定義字體“ ProximaNovaLight”未加載，因此.steps中的h2元素的高度與Chrome中的高度略有不同。

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

.steps h2 {
    height: 26px;
}

那是最快的“修復”。

潛在的問題是h2的高度根本沒有任何區別 。 您實施網站此部分的方式並不可靠。 您在.steps上具有整個“非活動”圖像作為背景圖像，但是隨后，您分別在每個<a class="icon">元素中放置了“活動”圖像。 這容易破裂。

例如，即使在目前可以正常運行的Chrome中，也請嘗試放大一點然后將鼠標懸停。 圖像在四處晃動。

該網站的另一個問題是您在doctype上方有一個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">

刪除評論！

Answer 2

我可以建議一個更好的方法來實現這一點嗎？ 您有2張大圖，分別是21.8K和23k。 圓形背景只需要1張圖片。 和帶有紅色懸停狀態的圖標在精靈中。 而且您不需要水平線的圖像，可以使用純CSS來完成。 點擊下面的鏈接。 它應該是這樣的：小提琴

您的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

好。 下載了所有資源，並確認即使沒有加載Web字體也確實在Chrome中出現了問題，就像在Firefox中一樣。 （僅在開發工具中停用字體就無法復制它，因為在您這樣做時已經確定了元素大小。）因此，我們可以回答“ 為什么它在Firefox中而不是在Chrome中發生？ ”那是字體。 因此，如果您可以正確地將字體加載到FF中，則可以解決問題。

否則如何解決？ 通過將背景分配給兩個不同的元素，您的生活變得更加艱難。 （主要背景位於.steps ，而:hover背景位於.col子元素上。）當您簡單地在同一元素上交換背景時，將內容排列起來總是比較容易的。 我將水平線作為.steps的背景，然后將圓形徽章圖標都應用於.col div。 這樣，無論其余頁面如何重排，它們仍將彼此對齊，並且在最壞的情況下，背景線將稍微偏離中心。 但...

但是為什么會在這里發生呢？ 據我所知，無法下載Webfont文件進行進一步測試，這是因為您的.steps h2樣式未提供明確的高度，並且高度是在渲染時根據字體特征確定的。 存在webfont時，該元素的高度為26px。 丟失時，高度為28px。 如果您將高度明確設置為28px，則可以針對兩種情況進行覆蓋並計划。 當我將該高度設置為28px，然后將圖標的:hover條件的背景偏移設置為-15px而不是當前的33px時，一切似乎正常。 當我使用開發工具在生產站點上進行這些更改時，無論有無webfont，它似乎都可以在Chrome和Firefox中使用。

Answer 5

為什么不使用重置樣式表來使兩個瀏覽器均勻，然后應用您的樣式。

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

Firefox和Chrome之間2px的神秘差異

問題描述

5 個解決方案

解決方案1
5 2012-07-17 14:27:41

解決方案2
5 已采納 2012-07-17 19:10:10

解決方案3
1 2013-04-23 11:12:13

解決方案4
0 2012-07-17 20:16:46

解決方案5
-1 2012-07-17 14:34:23

Firefox和Chrome之間2px的神秘差異

問題描述

5 個解決方案

解決方案1 5 2012-07-17 14:27:41

解決方案2 5 已采納 2012-07-17 19:10:10

解決方案3 1 2013-04-23 11:12:13

解決方案4 0 2012-07-17 20:16:46

解決方案5 -1 2012-07-17 14:34:23

解決方案1
5 2012-07-17 14:27:41

解決方案2
5 已采納 2012-07-17 19:10:10

解決方案3
1 2013-04-23 11:12:13

解決方案4
0 2012-07-17 20:16:46

解決方案5
-1 2012-07-17 14:34:23