调整大小和计算高度- bug

Resize and computed height - bugs

本文关键字：高度 bug 计算 调整      更新时间：2023-09-26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    text-align: center;
}
#prob {
    background-color: #F00;
    width: 300px;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    vertical-align: middle;
}
#prob img {
    width: 200px;
    height: 150px;
    display: inline;
    vertical-align: middle;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var img = new Image();
    img.src = 'http://galerijauspomena.net76.net/images/10042011744.jpg';
    var div = $("#prob").get()[0];
    alert($(window).height()); // First showing good height, but few px larger than a page
    document.getElementById("cont").style.lineHeight = $(document).height() + 'px';
    $(window).resize(
        function(){
            alert($(document).height()); // On resize down or up, its showing always bigger px, even on Firefox freeze browser!
            document.getElementById("cont").style.lineHeight = $(document).height() + 'px';
        }
    );
    div.appendChild(img);
});
</script>
</head>
<body>
<div id="cont">&nbsp; <!-- nbsp in order to line-height to work. Is it any way without it? -->
<div id="prob">&nbsp;</div>
</div>
</body>
</html>

调整大小后，我发现计算的高度总是更大，尽管我调整大小。我犯了什么错误吗?

另外，在调整大小时，Firefox会自动冻结…

如果我理解你想做什么，你想使用$(window).height()而不是document。问题是，增加行高会增加文档的大小，这又会增加行高，增加文档大小，等等。所以它会越来越大

相关文章：