javascript - 在 IE 中获取自动高度元素的实际高度

Question

我很困惑!有了这个:

...
<div id="main">         
    <div id="content">
        <div class="col1">
        ...COLUMN1 CONTENT GOES HERE...
        </div>

        <div class="col2">
        ...COLUMN2 CONTENT GOES HERE...
        </div>
    </div><!-- #content -->
</div><!-- #main -->
...

如您所见，有一些列，我想将它们的容器元素的高度设置为两列的最大尺寸(加上 130 像素)。所以通过使用原型(prototype)框架:

//fixing column height problem
Event.observe(window,"load",function(){             
    if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
        $('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
    else
        $('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe

它在 Firefox、Opera、Safari 和 Chrome 中运行良好，但无法返回列的实际高度。在 IE7+ 中(未在 IE6 中测试)它返回 NaN 作为列高度。
我已经设法找出是因为这个:

.col1,.col2{"height:auto;"}

我还使用了“$('col1').offsetHeight”，它返回 0 作为每列的高度值。

HTML 的样式是这样的:

#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}

请问您对这个问题有什么想法吗？!

update/三天才解决，冒着悬赏的风险!
有关解决方案，请查看 this question/answer .

Answer 1

作为对 Marc 回答的补充；在 Prototype 中有一个 jQuery 的 height() 是相等的:

$('col1').getDimensions().height //or .width ofcourse

这是文档:http://prototypejs.org/api/element/getDimensions

更新:我同意 crescentfresh以下。由于我过去遇到过完全相同的问题，因此我搜索了所有可能的方法来查找维度属性，但我失败了。请看看这个:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

如您所见，函数 has been written获取元素的计算渲染当前样式，但在我们的例子中，我猜即使这个方法也会失败。 (值得一试)

所以，作为 crescentfresh said ，你必须在你的 CSS 定位方法中找到问题，同时不要浪费你的时间去寻找一个合适的 javascript 函数，它可以发挥神奇的作用。让我们首先删除 #content DIV 并让 #main 成为所述列的唯一包装器，然后对剩余部分进行样式化以实现预期目标。