1

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

我无法计算显示类型元素的真实宽度：表格单元格。

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

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

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

谢谢！

4

1 回答 1

0

我有类似的问题。

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

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

关于此的另一篇文章在这里存在：Chrome 中的计算宽度错误，在 FFox / IE 中是否正常？

于 2013-10-08T14:33:02.333 回答