Question

我有一个像这样的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添加水平和垂直滚动条。 YUK！

我从CSS中删除了填充，然后修复了问题。但我需要一个很好的弹出消息而不是裁剪消息。

可以做些什么？

感谢您的帮助。 Coenos

Answer 1

如果您未定位IE 7或更低版本，则可以使用div {box-sizing：border-box;}。你提供的任何填充都将填充“INSIDE”指定的高度＆amp; DIV的宽度而不是外面。

Answer 2

尝试将div位置设为相对位置。我自己从来没有经历过这个。

div {
    position: relative;
}

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

我在IE8的模拟器中检查过，你可以查看真正的IE8并查看它是否有效

IE8 Jquery show（）div增加了父div的大小

2 个答案: