2

垂直センタリングの実装に問題があります。Chrome と Safari では正常に動作しているようですが、Firefox ではおかしな動作をします (Mac でデバッグしています)。

ブラウザのサイズを変更すると、ホバー要素のサイズが親に合わせてサイズ変更されず、ブラウザが元の幅にサイズ変更されると、ホバー要素が小さすぎます。

このビデオ を見るデモ
はこちら . (コードビューへのリンク)

これを修正する方法についてのアイデアはありますか?

4

3 に答える 3

1

最終的に、これらの変更でこの問題を解決することができました。
将来誰かに役立つことを願っています（回答の下部にある完全なソリューションへのリンク）。

元のマークアップ

<article class="work-preview">
    <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
    <div class="covering background"></div>
    <div class="covering foreground">
            <h2>A Text</h2>
    </div>
</article>



新しいマークアップ

<article class="work-preview">
        <img src="http://lorempixel.com/output/nightlife-q-c-600-414-6.jpg">
        <div class="coveringcontainer">
            <div class="covering foreground">
                <h2>A Text</h2>
            </div>
        </div>
</article>



オリジナルCSS

.covering {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}

body .work-preview:hover .covering {
    opacity: 1;
    filter:alpha(opacity=100);
    cursor: pointer;
}



新しい CSS

.coveringcontainer {
  position: absolute;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
}

.work-preview:hover .coveringcontainer {
  display: block;
  cursor: pointer;
}

.covering {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
}



そして、ここに完全な解決策があります！

于 2013-04-05T10:02:35.833 に答える
0

oninline-block;の代わりに使ってみてくださいinline-table

body .work-preview
于 2013-04-02T23:10:31.740 に答える
0

vertical-align:middle;Firefox は、テーブル セルでのみ考慮されるため、考慮しません。さらに詳しい情報が必要な場合は、Understanding Vertically Alignを読むことをお勧めします。

于 2013-04-03T21:09:20.253 に答える