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

Firefoxでは、カスタムフォント「ProximaNovaLight」が読み込まれないため、h2内部の要素の高さ.stepsがChromeの高さとわずかに異なります。

Chromeでは、h2の計算された高さは26ピクセルですが、Firefoxでは30ピクセルです。このCSSを追加して、ChromeとFirefoxの一貫性を保ちます。

.steps h2 {
    height: 26px;
}

これが最も迅速な「修正」です。

根本的な問題は、の高さh2 がまったく違いを生むことです。サイトのこの部分を実装する方法は堅牢ではありません。の背景画像として「非アクティブ」画像全体がありますが、各要素.stepsに個別に配置された「アクティブ」画像があります。<a class="icon">これは壊れやすいです。

たとえば、現時点で機能すると思われるChromeでも、少しズームインしてからホバーしてみてください。画像が揺れ動く。

このサイトのもう1つの問題は、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">

コメントを削除してください！

于 2012-07-17T14:27:41.103 に答える
5

これを実装するためのより良い方法を提案できますか？21.8Kと23kの2つの大きな画像があります。円形の背景に必要な画像は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つの画像のみをロードし、適切な背景位置を使用して、各アイコンとそのホバー状態の正しい画像を取得します。お役に立てれば。

于 2012-07-17T19:10:10.020 に答える
1

これをcssに追加します。

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

わかった。すべてのリソースをダウンロードし、Firefoxの場合と同様に、Webフォントが読み込まれていない場合でもChromeでも問題が実際に発生することを確認しました。（開発ツールでフォントを非アクティブ化するだけでは、その時点で要素サイズがすでに確立されているため、フォントを再現することはできません。）したがって、「Firefoxでは発生するのにChromeでは発生しないのはなぜですか？」と明確に答えることができます。それ：それはフォントです。したがって、FFでフォントを正しくロードできれば、問題は解決します。

それ以外の方法で修正するには？背景を2つの異なる要素に割り当てることで、人生をより困難にしています。（メインの背景はオン.stepsで、:hover背景は.col子要素にあります。）同じ要素の背景を単に交換するだけで、物事を並べるのが常に簡単になります。水平線を背景にして.stepsから、丸いバッジアイコンを両方とも.coldivに適用します。そうすれば、ページの残りの部分がどのようにリフローするかに関係なく、それらは互いに整列され、最悪の場合、背景線はわずかに中心から外れます。だが...

しかし、なぜそれがここで起こっているのですか？さらにテストするためにWebフォントファイルをダウンロードできなくてもわかる限り、.steps h2スタイルが明示的な高さを提供しておらず、レンダリング時にフォントの特性に基づいて高さが決定されるためです。Webフォントが存在する場合、その要素の高さは26pxです。欠落している場合、高さは28pxです。高さを明示的に28pxに設定すると、どちらの状況でもカバーして計画できます。その高さを28pxに設定し、アイコンの:hover状態の背景オフセットを現在の33pxではなく-15pxに設定すると、すべてが機能しているように見えます。開発ツールを使用して本番サイトでこれらの変更を行うと、Webフォントの有無にかかわらず、ChromeとFirefoxの両方で機能するようです。

于 2012-07-17T20:16:46.900 に答える
-1

リセットスタイルシートを使用して両方のブラウザを均等にし、スタイルを適用してみませんか。

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

于 2012-07-17T14:34:23.867 に答える