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 で幅が設定されていても、それは table-cell 要素であるため、実際の幅は親の table 要素を埋めるものです。そのため、ブラウザ ウィンドウのサイズが変更されると値が変化します。
しかし、Chrome 30 では、正しくレンダリングされていても、コンソールに出力される幅は常に css 値: 200 です。
これは、レイアウト目的でテーブル セルの実際の幅を計算する必要がある私の特定のスクリプトの問題です。
ここで何が起こっているのか、Chrome 30 で動作させるにはどうすればよいですか?
編集：
わかりました回避策を見つけました。clientWidth は引き続き期待どおりに機能するため、幅の計算は...
var width = document.getElementById( "testCell" ).clientWidth;
...仕事をします。ただし、誰かが情報を持っている場合は、ここで何が起こっているのかを知りたいと思っています。
ありがとう！