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

Question

I'm experiencing a problem with with the latest beta version of Chrome (30.0.1599.14 beta.) 我在使用最新的测试版Chrome（30.0.1599.14测试版）时遇到问题。

I cannot calculate the true width of elements of type display: table-cell. 我无法计算类型为display的元素的真实宽度：table-cell。

Here is some test code that outputs the width of a table cell to the console as the browser window is resized: 这是一些测试代码，它们在调整浏览器窗口大小时将表格单元的宽度输出到控制台：

<!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>

In latest versions of Safari and Firefox as well as in Chrome 29, this works as expected. 在Safari和Firefox的最新版本以及Chrome 29中，该功能均能正常运行。 That is to say, even though the width is set in css, because it is a table-cell element, the actual width is whatever fills the parent table element. 也就是说，即使宽度是在css中设置的，因为它是一个表格单元元素，所以实际的宽度是填充父表格元素的任何宽度。 So the value will change as the browser window is resized. 因此，值将随着调整浏览器窗口的大小而改变。

However in Chrome 30, even though it renders properly, the width outputted to the console is always the css value: 200. 但是，在Chrome 30中，即使可以正确渲染，输出到控制台的宽度也始终是css值：200。

This is a problem for certain scripts of mine that need to calculate the true width of table-cells for layout purposes. 对于我的某些脚本来说，这是一个问题，这些脚本需要为布局目的计算表单元格的真实宽度。

Any ideas what is going on here, and how I can get it to work in Chrome 30? 您有什么想法吗？如何在Chrome 30中使用它？

EDIT: 编辑：

Ok I found a workaround. 好的，我找到了解决方法。 clientWidth still works as expected, so calculating the width by... clientWidth仍然可以按预期工作，因此可以通过以下方式计算宽度：

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

...will do the job. ...会做的工作。 However I would still be interested in knowing what is going on here, if anyone has info. 但是，如果有人知道信息，我仍然想知道这里发生了什么。

Thanks! 谢谢！

Answer 1

I'm having similar issues. 我有类似的问题。

I think the problem is a regression in chrome 30. 我认为问题出在chrome 30中。

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

Another post about this exists here: Calculated width wrong in Chrome, fine in FFox / IE? 关于此的另一篇文章在这里：计算宽度在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