Jquery .width() 在 chrome 和 firefox 上给出不同的值

Question

我正在为我的表使用这个 JQuery 代码。

    $(document).ready(function () {

    var tableBottom = $(window).height() - $('#compare-table').height();

    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var tableTop = $('#compare-table').offset().top;

        if (y >= tableTop && y <= tableBottom) {
            $('#compare-table-controller').addClass('fixed');
            $('#compare-table-controller').css('margin-top', '-' + tableTop + 'px');
        } else {
            $('#compare-table-controller').removeClass('fixed');
            $('#compare-table-controller').css('margin-top', '0px');
        }
    });


    var compareTableHeight = $('#compare-table > table').height() + 1;
    var compareTableTotalColumn = $('#compare-table > table').width() / 195;
    $('#compare-table').css('height', compareTableHeight);

    alert($('#compare-table > table').width());
});

出于某种原因，alert() 在 chrome 和 firefox 上给了我不同的值。我使用的是 chrome 28.0.1500.71 和 firefox 22.0。正确的值应该是 1170px。

因此，所有 6 列都显示在 firefox 上。它应该只显示 4 个并隐藏其他 2 个。

显示的 div 的 CSS 是。

#compare-table-h {
        width: 780px;
        overflow: hidden;
        position:fixed;
        height: 213px;
        z-index: 999;
    }
    #compare-table {
        width: 780px;
        overflow: hidden;
        position:relative;
        margin-top: 213px;
    }

表格在div里面是

<table id="compare-table-head" class="table font-size-12 compare-table table-striped" style="position:absolute; border-bottom:1px solid #ddd; width: 1170px;">

第一个表工作正常，第二个不正常

Answer 1

您的问题似乎是由于分配给表格的内联样式与 CSS 属性之间的混淆引起的。 ( http://jsfiddle.net/XV3Vz/19/ )

内联样式是:

 style="position:absolute; border-bottom:1px solid #ddd; width: 1170px"

父元素的CSS样式是:

#compare-table {
    width: 780px;
    overflow: hidden;
    position:relative;
    margin-top: 213px;
}

更新:

仔细查看之后，我发现问题出在 div 中使用表格，您可以看到 it works properly otherwise 是如何实现的.

我真的不知道你为什么在包装 div 中使用 position:absolute，但是你的问题可以解决，去掉它并添加 display:table 包装元素的样式:

.compare-table-in-div {
    border-bottom:1px solid #ddd;
    width: 1170px !important;
    background: #ccffee;
   /*deleted position absolute */
}
#compare-table {
    width: 780px;
    position:relative;
    background: #ccddff;
    height: 50px;
    display:table;  /*ADDED */
}

实例:http://jsfiddle.net/XV3Vz/25/