0

このようなJqueryポップアップがあります

$("[id=messagelink]").hover(function(e) {
    $(this).next('#popupmessage').show();
}, function() {
    $(this).next('#popupmessage').hide();
});

div コード:

<div>......
<a href='' id='messagelink' name='messagelink' touserid='1' ><img src='images/icons/mail.png' width='15' height='15' /></a>
<div id='popupmessage' class='popup'>Blaaah</div>";
......
</div>

CSS

.popup {
display: none;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
position: absolute;
}

FF、Chrome、Opera ではすべて正常に動作しますが、IE ではポップアップが表示されますが、親 DIV の高さと幅が増加しています。さらに悪いことに、DIV をオーバーフローさせて水平および垂直スクロールバーを DIV に追加しています。ユッ！

CSS からパディングを削除したところ、問題は修正されました。しかし、トリミングされたものではなく、素敵なポップアップ メッセージが必要です。

何ができますか？

ご協力いただきありがとうございます。コエノス

4

2 に答える 2

0

IE 7 以下を対象としていない場合は、div{box-sizing: border-box;} を使用できます。指定したパディングは、DIV の指定された高さと幅の「内側」にパディングされ、外側にはパディングされません。

于 2013-03-26T17:34:15.160 に答える
0

divの位置を相対的にしてみてください。私はこれを自分で経験したことがありません。

div {
    position: relative;
}

http://jsfiddle.net/HaJjH/2/

IE8のシミュレーターでチェックインしました。実際のIE8でチェックして、動作するかどうかを確認できます

于 2013-03-26T18:02:04.750 に答える