Question

我尝试使用这两种解决方案

1）

jQuery.fn.equalHeights = function() { 
return this.height(Math.max.apply(null, 
this.map(function() { 
return jQuery(this).height() 
}).get() 
)); 
};

2）

jQuery.fn.equalHeights = function () {
var height = 0,
reset = jQuery.browser.msie ? "1%" : "auto";
return this.css("height", reset).each(function () {
height = Math.max(height, this.offsetHeight);
}).css("height", height).each(function () {
    var h = this.offsetHeight;
    if (h > height) {
        jQuery(this).css("height", height - (h - height));
    }
});
};

具有相同的高度列，但我只在webkit浏览器中遇到问题。

这是screenshot，左栏的内容溢出。这些列实际上具有相同的高度，但它们都太短了......

这是我的jQuery调用，在页脚中：

jQuery(document).ready(

function() {

//Equal columns
jQuery('#center_column, #right_column,#left_column').equalHeights();
}
);

看起来它是在DOM由于某种原因完全准备好之前执行的......

有什么建议吗？

Answer 1

过去我遇到过一些问题，Webkit浏览器直到document.ready事件之后才能看到图像尺寸。要解决此问题，您可以在标记中指定高度和宽度：

<img src="foo.jpg" alt="Foo" width="500" height="500" />

如果这不起作用，你可能会发现你需要做一些hack，使用window.load事件而不是$（document）.ready。

等高的列jQuery在webkit浏览器中不起作用

1 个答案: