Chrome 30和类型的宽度显示：table-cell？

Question

我在使用最新的测试版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;

...会做的工作。 但是，如果有人知道信息，我仍然想知道这里发生了什么。

谢谢！

Answer 1

我有类似的问题。

我认为问题出在chrome 30中。

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

关于此的另一篇文章在这里：计算宽度在Chrome中错误，在FFox / IE中可以吗？

Chrome 30和类型的宽度显示：table-cell？

问题描述

1 个解决方案

解决方案1
0 2013-10-08 14:33:02

Chrome 30和类型的宽度显示：table-cell？

问题描述

1 个解决方案

解决方案1 0 2013-10-08 14:33:02

解决方案1
0 2013-10-08 14:33:02