0

div にカーソルを合わせると、別の div がフェード インし、不透明度があり、一部のテキストが div 内の完全に中央に配置されます。これは、Firefox を除くすべてのブラウザで正常に動作するようです。
ここに jsfiddle のデモがあります: http://jsfiddle.net/neal_fletcher/WHCNF/

HTML:

<div class="grid-block identity" style="background-image: url('http://placekitten.com/380/250');">
    <div class="grid-block-text-hover-wrap">
    <div class="grid-block-text-wrap">
        <div class="grid-block-text-title">TITLE</div>
        <div class="grid-block-text-subtitle">SUBTITLE</div>
    </div>
    </div>
</div>


CSS:

.grid-block {
    position: absolute;
    width: 380px; height: 250px;
    margin-left: 25px; margin-right: 25px;
    margin-bottom: 50px;
    font-family: 'times';
    text-align: center;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    display: table; vertical-align: middle;
}

.grid-block-text-hover-wrap {
    position: absolute; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.75);
    display: table;
    vertical-align: middle;
}

.grid-block-text-hover-wrap .grid-block-text-wrap {
    color: white; 
}

.grid-block .grid-block-text-wrap {
    display: table-cell; vertical-align: middle;
    width: 100%; height: 100%;
}

.grid-block-text-wrap {
    margin-left: 50px; margin-right: 50px;
}

.grid-block-text-title {
    position: relative;
    margin-top: 7px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.grid-block-text-hover-wrap .grid-block-text-title {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 2px !important;
}

.grid-block-text-subtitle {
    position: relative;
    font-size: 12px;
    letter-spacing: 2px !important;
    text-transform: uppercase;
}

ご覧のとおり.grid-block-text-hover-wrap、ホバーするとフェードインしますが、Firefox では何らかの理由でこの div が正しく表示されず、テキストが中央に配置されていません。なぜこれが起こっているように見えるのかわかりません。どんな提案でも大歓迎です！

4

2 に答える 2

0

で現在のクラスを変更します

.grid-block-text-hover-wrap {
position: relative; 
width: 100%; height: 100%; 
background: rgba(0,0,0,0.75);
display: table;
vertical-align: middle; }

Firefoxでもうまくいくことを願っています。

于 2013-07-21T13:32:06.650 に答える
0

に置き換えheight: 100%; width: 100%てみてくださいwidth: 380px; height: 250px。新しいフィドルをご覧ください: http://jsfiddle.net/WHCNF/1/

于 2013-07-21T13:21:58.147 に答える