Jquery .width（）在chrome和firefox上给出不同的值 [英] Jquery .width() giving different values on chrome and firefox

问题描述

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

I'm using this JQuery code for my table.

    $(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。

for some reason the alert() gives me different values on chrome and firefox. I'm using chrome 28.0.1500.71 and firefox 22.0. The correct value should be 1170px.

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

As a result, ALL 6 columns are shown on firefox. it should only show 4 and hide the other 2.

我显示的div的CSS是。

my CSS for the displayed div's are.

#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;">

第1个表工作正常，第二个表没有

the 1st table works fine, the second doesn't

推荐答案

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

It seems that your problem is caused because of a confusion between the inline style assigned to the table and the CSS properties. (http://jsfiddle.net/XV3Vz/19/)

内联样式为：

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

父元素的CSS样式是：

And the CSS style for the parent element is:

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

更新：

看了一下后我发现问题是在 div 中使用一个表，你可以看到它正常工作，否则。

Update:

After looking at it a bit more i saw the problem was in using a table inside a div, you can see how it works properly otherwise.

我真的不知道你为什么使用<$ c包装 div 中的$ c> position：absolute ，但你的问题可以解决，摆脱它并添加显示：table 包装元素的样式：

I don't really know why you are using the position:absolute in the wrapping div, but your problem could be fixed getting rid of it and adding the display:table style to the wrapping element:

.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/

这篇关于Jquery .width（）在chrome和firefox上给出不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！