IE 8 和 jquery 问题答案

【问题标题】：IE 8 and jquery problemIE 8 和 jquery 问题
【发布时间】：2010-04-07 03:44:18
【问题描述】：

我有这样的div：

<div class="box">
    <div id="myid" style="display:hidden;"> <p>some stuff here</p></div>
</div>

当我在上面的 html 上执行$("myid").slideToggle("slow"); 时（div“myid”被隐藏），如果内容的高度超过框，我的内容会从“框”类的底部溢出，奇怪的是这不会除了 IE8 之外的其他浏览器也会发生

我该如何解决这个问题，以便当“myid”开始显示内容时，.box 的高度会自行调整大小以适应内部 div。

我的盒子的 CSS：

.box {
    background:#fff;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    border:1px solid #fff;
    margin-bottom:10px;
    padding:0;
    }

【问题讨论】：

你是否在某处指定高度，可能让 IE8 坚持这个设定值？
是的，我现在已经为我的盒子添加了 CSS。

标签： jquery html css

【解决方案1】：

display:hidden; 不是你想要的。尝试设置display:none;。

主要问题是您希望盒子有一个最小高度，对吗？但它应该变得更大以适应内部 div 吗？您基本上必须避免在盒子上设置明确的高度。您可以使用min-height，但 IE 不支持它。我会使用具有明确高度的#myid 的同级来将框保持在最小高度。例如，它可能是 1 像素宽，但高 50 像素（那么最小高度为 50 像素）。您需要浮动您的内部 div。

这是一个演示：http://www.jsfiddle.net/ZKkB3/

主要的限制是你在左边有一点点间距。我想你可以用负边距来解决这个问题。

【讨论】：