10

純粋なCSSアニメーショントランジションを備えたシンプルな言語選択ページがあります。ここでjsFiddleを作成しました。

動作は次のとおりです。

  1. 2つ（またはそれ以上）の言語セレクターの1つにマウスを合わせます。
  2. その言語セレクターは上向きに遷移し、完全に不透明になります。関連する言語テキスト（英語、スペイン語など）も表示されます。
  3. ユーザーはリンクをクリックするか、マウスアウトします。その場合、遷移は逆になります。

Chromeでは、期待どおりに動作します。

Firefoxでは、1つの画像の上にマウスを置くと、両方が上に移動します。

Operaでは、ほぼ期待どおりに動作しますが、上に移動するとテキストが下にジャンプします。

これらのブラウザでこれが発生する理由と、可能であれば修正する方法を理解しようとしています。

jsFiddleがダウンしている場合、関連するコードは次のとおりです。

HTML

<div id="container"><div id="cell">
    <div class="langcell"><a href="en/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
    </div>
    <div class="langcell"><a href="es/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Espa&ntilde;ol</p></a>
    </div>
</div></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#container {
    width: 100%;
    height: 100%;
    display: table;
}
#cell {
    display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
    display: inline-block;
    margin: auto 1em;
}
a {
    position: relative;
    top: 0;
    -webkit-transition: top 0.25s;
    -moz-transition: top 0.25s;
    -o-transition: top 0.25s;
    transition: top 0.25s;
    color: black;
    text-decoration: none;
}
a:hover {
    top: -16pt;
}
a p {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: 0.05em;
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover p {
    opacity: 1;
}
a img {
    opacity: 0.65;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover img {
    opacity: 1;
}
4

2 に答える 2

6

Firefox（v12）でも奇妙な問題が発生し、ホバー時に両方の要素が上に移動していました。それ以降のバージョン（19v）では、解決されたようです。

私はあなたのセレクターで何かが起こっていて、mozillaがWebkitに対して物事をどのように解釈するかを考えています。このjsfiddleが機能するかどうかを確認してください。

私が実際に行ったのは、のセレクターの多くを変更することだけで、それは機能aし.langcellているようです。.langcell aネストされたセレクターのように、同じスタイルを実現するには、CSSを少し再調整する必要がありました。がブロックでインラインブロックであるのにa、デフォルトでインラインになっていることが原因である可能性があります。pimg

私は嘘をつかず、なぜそれが最初に起こったのかを完全に理解しているとは言いませんが、一般的に、要素よりもクラスにスタイルを与えることは単なる好みではなく、レンダリング時にもより効率的です。

CSSセレクターのパフォーマンス

コード：

    .langcell {
        display: inline-block;
        margin: auto 1em;
        position: relative;
        top: 0;
        -webkit-transition: top 0.25s;
        -moz-transition: top 0.25s;
        -o-transition: top 0.25s;
        transition: top 0.25s;
    }

    .langcell a { 
        color: black;
        text-decoration: none;
    }
    .langcell:hover {
        top: -16pt;
    }
    .langcell p {
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        font-family: Verdana, Geneva, sans-serif;
        letter-spacing: 0.05em;
        opacity: 0;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    .langcell:hover p {
        opacity: 1;
    }
    .langcell img {
        opacity: 0.65;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    langcell:hover img {
       opacity: 1;
    }
于 2013-03-15T07:30:10.103 に答える
1

CSS3はかなり新しいものです。また、多くの機能はまだ多くのブラウザで互換性がありません。互換性チャート

したがって、クライアントが少し古いブラウザを使用している場合（古いバージョンを使用している場合でも）、それは一種の不快感です。その場合、CSS3移行は機能しません。

移行を行う最も安全な方法は、javascriptまたはjQueryなどのjavascriptライブラリを使用して移行することです。

于 2013-03-15T07:38:43.703 に答える