Question

我有一个非常简单的HTML / JS代码，它可以在鼠标移出时扩展div的大小，并在鼠标移出时再次折叠它。代码如下所示：

CSS：

.sign-in-up {
    position: absolute;
    left: 780px;
    background-color: #8599b2;
    font-size: 9pt;
    line-height: 23px;
    color:white;
    text-align: center;
    height: 25px;        /* note this height 25px */
    width: 164px;
    overflow: hidden;
}

然后我在HTML中使用了div：

<div class="sign-in-up" id="sign-in-up"
     onmouseover="$(this).css('height','55px')"
     onmouseout= "$(this).css('height','25px')">
     my html goes here
</div>

这在Firefox（从版本3及更高版本），Safari，Chrome，Opera和IE9中完美运行 - 但不适用于IE8或IE7。当我鼠标悬停在div上时，视觉上没有任何变化。我尝试将onmouseover更改为

onmouseover="$(this).css('height','55px');alert($(this).height())"

并且警告框显示55px的正确高度，但是屏幕上没有任何变化，div仍显示为25px高度。

我已经尝试了所有可能的事情 - 结果完全相同。看起来IE正在改变dom中div的高度，但不会重新绘制屏幕上的div以匹配其新高度。

在这个阶段，我完全迷失了。非常感谢任何帮助。

修改

谢谢大家的回复。经过多次敲击墙壁（在这种情况下是电脑屏幕）之后，问题原因是由于曲线工程师的干扰 - 一个用于模仿旧版IE中的圆角（边界半径）的javascript库。一旦它完成了它的工作，它将积极地防止重新绘制受影响的元素。

删除圆角后，一切正常，虽然看起来更糟 - 但至少它有效。我将研究圆角的其他选项。

Answer 1

谢谢大家的回复。经过多次敲击墙壁（在这种情况下是电脑屏幕）之后，问题原因是由于曲线工程师的干扰 - 一个用于模仿旧版IE中的圆角（边界半径）的javascript库。一旦它完成了它的工作，它将积极地防止重新绘制受影响的元素。

删除圆角后，一切正常，虽然看起来更糟 - 但至少它有效。我将研究圆角的其他选项。

Answer 2

你试过吗

$(this).height(55)

而不是

$(this).css('height','55px')

Answer 3

它实际上正在运作

http://jsbin.com/ebejew

Answer 4

使用这个简单的jQuery：

$(document).ready(function() {
    $(".sign-in-up").hover(function() {
        $(this).animate({
            height: 55
        }, 10);
    }, function() {
        $(this).animate({
            height: 25
        }, 10);
    });
});

Answer 5

我倾向于采用更多CSS驱动的方法。这会将您的演示文稿提取到它所属的CSS中。

#sign-in-up {
    height:25px;
}

#sign-in-up.expanded {
    height:55px;
}

的js

$(this).addClass('expanded');

$(this).removeClass('expanded');

在IE7和IE8中，div高度变化非常奇怪

5 个答案: