jquery 高度和宽度在 Internet Explorer 8 (ie8) 中返回不正确的值答案

【问题标题】：jquery height and width returning incorrect values in internet explorer 8 (ie8)jquery 高度和宽度在 Internet Explorer 8 (ie8) 中返回不正确的值
【发布时间】：2013-04-30 03:56:40
【问题描述】：

以下代码在 IE9+、Chrome、Firefox、Safari 上运行良好，但在 IE8 上却不行。它总是将列高返回为 0，宽度不正确。想法？

jQuery 版本：1.9.1

$(function ()
{
    $(window).load(function ()
    {
        // Megamenu
        $("#menu-primary > li").one('mouseenter', function (e)
        {
            var tallestColumnHeight = 0,
            submenuPanelTotalWidth = 0;

            $(".dropdown-menu > .dropdown-submenu", this).each(function ()
            {
                $(this).load();

                tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height())
                console.log('tallest column ' + tallestColumnHeight);

                submenuPanelTotalWidth += parseInt($(this).outerWidth(true), 10);
                console.log('panel width ' + submenuPanelTotalWidth);
            }).height(tallestColumnHeight);

            $(".dropdown-menu > .dropdown-submenu", this).parent().width(submenuPanelTotalWidth);
        });
    }); 
});

文档类型是什么样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【问题讨论】：

子菜单是否用css :hover显示？那么可能是时间问题。
它是：ul.nav li.dropdown:hover ul.dropdown-menu { display: block; }
这只是一个疯狂的猜测：可能在事件处理程序执行时下拉菜单尚未（完全）呈现。因此它的高度为 0。类似的东西。
你是对的，用 JS 而不是 CSS 来处理显示，为 IE8 修复了它，很快就会发布更新的代码。
哈，可惜我没有写答案:)

标签： jquery css internet-explorer-8 height width

【解决方案1】：

如果您使用的是 JQuery 2.0：它不再支持 IE 8。

【讨论】：

【解决方案2】：

事实证明，当元素的可见性（显示：块）通过悬停时的 CSS 设置时，IE8 无法正常工作。用 JS 处理显示就成功了（感谢@zeroflagL 的提示）：

有效的代码（当然删除 console.log 行）：

$(window).load(function ()
{
    $("#menu-primary > li").on('mouseenter', function (e)
    {
        var tallestColumnHeight = 0,
        submenuPanelTotalWidth = 0;

        $(".dropdown-menu", this).show();
            $(".dropdown-menu > .dropdown-submenu", this).each(function ()
            {
                $(this).load();

                tallestColumnHeight = Math.max(tallestColumnHeight, $(this).height());
                console.log('tallest column ' + tallestColumnHeight);

                submenuPanelTotalWidth += parseInt($(this).outerWidth(true), 10);
                console.log('panel width ' + submenuPanelTotalWidth);

            }).height(tallestColumnHeight);
            $(".dropdown-menu > .dropdown-submenu", this).parent().width(submenuPanelTotalWidth);        
    }).on('mouseleave', function (e)
    {
        $(".dropdown-menu", this).hide();
    });
});

【讨论】：