在 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 像素）。所以通过使用原型框架：

//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;
}

请对这个问题有任何想法？！

更新/花了三天时间解决，我冒着获得赏金的风险！
有关解决方案，请查看this question/answer。

Answer 1

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

$('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 成为所述列的唯一包装，然后对剩余部分进行样式设置以实现预期目标。

Answer 2

既然 IE 想给你添麻烦，你可以给它一些特别的关注，并使用一个我相信它会识别的属性...

var height;
if(document.all) { //This means it is IE
  height = document.getElementById('col1').offsetHeight;
}
else {
  height = //Use what is working in other browsers now
}

Answer 3

来自： Why would jquery return 0 for an offsetHeight when firebug says it's 34?

一个实际上并没有占用的元素 参与文档渲染过程 没有尺寸，并且会给出一个 偏移宽度/高度为 0。

Prototype 的 getDimensions() 和 jQuery 的 height() 都读取了 offsetHeight 或 clientHeight 属性，您已经尝试并得到了 0。所以在您的代码中的某处必须有 something #col 超出渲染流程。我能想到的就这些了。

Answer 4

阿塔拉德，
上述样式，即 css 表明您尚未指定高度。 请尝试在类中添加 _height:auto，如下所示

    .col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}

基本上，当分配给特定的 div 或任何元素时，许多浏览器无法识别高度。在这种情况下，我们使用上述解决方法。 希望以上对你有所帮助。

谢谢，
萨米克沙

Answer 5

我不知道它是否会工作（未经测试），但你可以试试 jQuery 和 height();这（理论上）给出了计算的高度。值得一试...

Answer 6

我知道这是一个老问题，但我找到了比“修复 css 并忘记 javascript”更好的答案。

我遇到了同样的问题并使用了.innerHeight()，它迫使 jQuery 计算高度。由于某种原因.outerHeight() 没有工作，而.innerHeight() 解决了这个问题。不确定原型是否有类似的方法。您可以查看 jQuery 库并了解 .innerHeight() 的工作原理，然后自己编写。