5

画像付きのページがあります。画像にカーソルを合わせると、その上にわずかに透明な白い div が表示され、いくつかのアクション ボタンと情報が表示されます。マウスを画像の外に移動すると、情報/ボタン ボックスが消えます (表示: なし)。

その非表示/マウスオーバー ボックスには、Facebook のようなボタンがあります。他のすべてのブラウザーではまったく問題なく表示されますが、ご想像のとおり、悪名高い IE ブラウザーでは奇妙な動作をします。IE7～IE8では、いいねボタンが一瞬だけ表示されて消えます。それはまだそこにあったときのようにデザインにスペースを残しますが、そうではありません. 最初にロールオーバーするかどうかは関係ありません。ボタンが 1 秒間表示されてから消えます。ただし、IE9 では、ボタンが表示され、そこにとどまります。2 回目にロールオーバーすると、最初のロールオーバーで背景が透明になったにもかかわらず、iframe の背景が白くなります。

非表示のマウスオーバー div の html コード:

<div id="hoverPopup">
    <div class="fbLikeWrapper">
        <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
    </div>
    <a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
        <div class="btn_small_prefix"></div>
        <div class="btn_gift_center">button1</div>
        <div class="btn_small_suffix"></div>
    </a>
    <a href="##">
        <div class="btn_small_prefix"></div>
        <div class="btn_gift_center">button2</div>
        <div class="btn_small_suffix"></div>
    </a>
</div>

CSS コード:

.fbLikeWrapper
{
    /*width       : 50px;
    margin-left : auto;
    margin-right: auto;*/
}
.fbLikeWrapper div
{
    display    : block;
    line-height: normal;
}

スクリーン キャプチャ:

IE9

ここに画像の説明を入力

IE7

ここに画像の説明を入力

4

2 に答える 2

2

私は、同様の問題を抱えていた同僚の 1 人から答えを見つけました。

ページが読み込まれたときにポップアップを非表示にする必要があったため、 というクラスを提供しましたdisplay:none;。ホバーすると、クラスのオンとオフが切り替わります。Facebook のようなボタンで動作するすべてのブラウザーでは、IE では動作しません。

理由はまだ正確にはわかりませんが、jquery.hide()と.show()関数を使用して非表示の div を切り替えて最初に設定し、クラスを使用しないと、魅力的に機能することがわかりました。ケースを閉じました。IEは引き続きダメです。

于 2012-05-03T12:11:24.180 に答える
2

これを試して：

#hoverPopup .fb-like {
    width: 47px;
}

.fbLikeWrapper
{
    display     : inline-block;
    width       : 51px;
    text-align  : center !important;
    margin      : 30px auto 10px;
    box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    -webkit-box-sizing  : border-box;
    overflow    : hidden;
}

これで問題が解決しない場合は、css ではなく JavaScript が問題の原因である可能性があり、より多くの情報 (javascript、html など) を共有する必要があります...

于 2012-04-26T21:15:36.527 に答える