У меня есть этот фрагмент, который демонстрирует проблему:
<html>
<head>
<title>height query demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<body>
<div id="opts" style="font-size:24px; text-align: center; margin: 10px auto;">
<div>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"
alt="jquerylogo"/>
</div>
</div>
<h1>Demo of querying height</h1>
<p>The source code of this document has a DIV prior to the H1. The DIV contains a
subdiv which in turn contains an image.<br />
Using jQuery's <tt>$(document).ready</tt>, the following processing takes place:</p>
<ol><li>DIV queried for its height</li>
<li>DIV detached from the document</li>
<li>height value written out here:
<span style="font-size: larger; color: magenta;" id="hytmsg"/></li>
<li>DIV attached at end of document</li></ol>
<script type="text/javascript">
$(document).ready(function() {
var hyt = $('#opts').height();
var div_for_later = $('#opts').detach();
$('#hytmsg').text(''+hyt);
$('body').append(div_for_later);
});
</script>
</body>
<html>
Загрузите его в Opera или Gecko, и число в элементе списка 3 будет примерно равно 53. Загрузите его в браузер Webkit (Chrome 12 намой компьютер под управлением Windows или Tear, созданный на старой версии Webkit на моем Nokia N800), и его число равно 0.
Проблема не возникает, если содержимое подраздела не является изображением или еслиизображение является прямым потомком основного div (т.е. не subdiv).Это происходит, даже если страница и изображение оба взяты из файла: URL-адреса (т. Е. Не зависят от сетевой задержки).
Какое простое изменение я могу сделать, чтобы правильно получить это значение высоты при загрузке страницы, но сохранитьDIV структурирован как есть?