Question

我想调整容器div的边距和列表中链接的填充，以便最后一个项目尽可能接近它旁边的可变大小图像的底部。该功能完全按照我第一次加载页面时的预期工作。

但是，如果重新加载页面，.height（）和.outerHeight（）函数将返回与原始值不同的值。它们也会根据浏览器返回不同的值，即使高度在外部样式表中明确说明。

$(document).ready(function(){

var headingSize = 2*($('div.title').outerHeight(true) + $('div.hint').outerHeight(true));
var adjHeight = $('#image img').height() + 70;
var rowCount = $('div#options ul li').length;
var rowHeight = $('div#options ul li a').height();

var padding = (((adjHeight - headingSize) / rowCount) - rowHeight)/2;

if(padding < 4){
 padding = 4;
}

var margin = (rowHeight + 2*padding)/2;

if(margin < 10){
 margin = 10;
}

$('div.options').css({'marginTop': margin});
$('div#options ul li a').css({'paddingTop' : padding, 'paddingBottom' : padding});  

});

因为它适用于第一次加载，我无法想象脚本会出现什么问题。为什么要这样做？我错过了什么？

谢谢！

-fucla

Answer 1

包含的css文件存在差异，与我对某些元素高度的定义相冲突。看起来像jQuery会得到不稳定的结果，因为它会在两种风格之间来回反弹。

删除了包含的文件，一切正常，花花公子。

Jquery .height（）Page Reload上的结果不一致

1 个答案: