Chrome 30 和 display: table-cell 类型元素的宽度？答案

【问题标题】：Chrome 30 and the width of elements of type display: table-cell?Chrome 30 和 display: table-cell 类型元素的宽度？
【发布时间】：2013-10-08 22:33:02
【问题描述】：

我在使用最新测试版 Chrome（30.0.1599.14 测试版）时遇到问题。

我无法计算 display: table-cell 类型元素的真实宽度。

下面是一些测试代码，当浏览器窗口被调整大小时，它会将表格单元格的宽度输出到控制台：

<!DOCTYPE html>
<html lang="en">

<head>        
    <style>
        .table {
            background: #ffc;
            display: table;
            width: 100%;
        }
        .cell {
            display: table-cell;
            width: 200px;
            border: 1px solid black;
            background: #ff0;
            height: 30px;
        }
        #testCell {
            background: #f00;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).on( "ready", function() {
            $(window).on( "resize", function() {
                var width = document.getElementById( "testCell" ).offsetWidth;
                // non jQuery way, for testing:
                // var width = document.getElementById( "testCell" ).offsetWidth;
                console.log( width );
            });
        });
    </script>

</head>

<body>

    <div class="table">
            <div class="cell" id="testCell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell" ></div>
    </div>

</body>

</html>

在最新版本的 Safari 和 Firefox 以及 Chrome 29 中，这可以正常工作。也就是说，即使在css中设置了宽度，因为它是一个表格单元格元素，实际宽度是填充父表格元素的任何内容。所以这个值会随着浏览器窗口大小的改变而改变。

然而在 Chrome 30 中，即使渲染正确，输出到控制台的宽度始终是 css 值：200。

这对于我的某些脚本来说是个问题，它们需要计算表格单元格的真实宽度以进行布局。

您知道这里发生了什么，以及如何让它在 Chrome 30 中运行？

编辑：

好的，我找到了解决方法。 clientWidth 仍然按预期工作，因此计算宽度...

var width = document.getElementById( "testCell" ).clientWidth;

...将完成这项工作。但是，如果有人有信息，我仍然想知道这里发生了什么。

谢谢！

【问题讨论】：

如果你尝试用纯js复制它，没有jQ呢？
刚试过没有jQ——同样的问题。问题已编辑。谢谢。
您是否考虑过style.width 而不是offsetwidth？
@RUJordan - 刚刚尝试过。它似乎也不起作用。事实上，它根本没有任何价值。
嗯..这是一个测试版..这可能是问题所在。

标签： javascript jquery css google-chrome

【解决方案1】：

我也有类似的问题。

我认为问题在于 chrome 30 中的回归。

见https://code.google.com/p/chromium/issues/detail?id=290399。

这里有另一个关于此的帖子：Calculated width wrong in Chrome, fine in FFox / IE?

【讨论】：