Chrome バージョン: 23.0.1271.95 m オペレーティング システム: Windows 7 64 ビット
http://jsfiddle.net/CTdQd/2/のテスト ページまたはソース コード ブローを確認してください。
ページには、「display: inline-block; position: relative;」というスタイルの親 div があります。幅と高さが異なる 3 つの子を持ちます。子の 1 つだけが「相対」位置を持ち、他の 2 つは「絶対」位置を持ちます。3 つの子の間で「相対」位置を切り替えると、親 div の高さは正しく更新されますが、幅は更新されず、幅は変更されません。Firefox や IE では問題ありません。これはクロムのバグですか？
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
#wrap {
border: 1px solid #F00;
display:inline-block;
position:relative;
}
.out {
position:absolute;
left: 0;
top: 600px;
}
.out.in {
position:relative;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div style="width:600px;height:400px;border:1px solid #DFDFDF;text-align:center;overflow:hidden;">
<div id="wrap">
<div id="item1" class="out in" style="width:200px;height:200px;background-color:#0F0;">200*200</div>
<div id="item2" class="out" style="width:300px;height:100px;background-color:#00F;color:#FFF;">300*100</div>
<div id="item3" class="out" style="width:400px;height:300px;background-color:#DDD;">400*300</div>
</div>
</div>
<p id="log"></p>
<div style="margin-top:10px;">
<input type="submit" id="test1" value="show1">
<input type="submit" id="test2" value="show2">
<input type="submit" id="test3" value="show3">
</div>
<script>
$(function() {
$('input').click(function() {
var parent = $('#wrap');
$('.in').removeClass('in');
$('.out').eq($(this).index()).addClass('in');
$('#log').text('the parent div\'s width: ' + parent.width() + 'px, height: ' + parent.height() + 'px');
});
});
</script>
</body>
</html>