Div 未在 Internet Explorer 中调整大小答案

【问题标题】：Div is not resizing in Internet ExplorerDiv 未在 Internet Explorer 中调整大小
【发布时间】：2011-02-04 08:48:29
【问题描述】：

编辑好的，在做了一些研究之后，它似乎是我正在使用的 clearfix。

第二级包装器（第二个包装器 > 第一个包装器 > 调整 div 大小）。实际上包含两个浮动的 div，彼此相邻。

如果在两个浮动的 div 下方，我有 ` 这一切都很好。

怎么了？

你好呀，

我有一个可以通过 jQuery 隐藏或显示的 div。

这在任何其他浏览器中都能完美运行。

它周围的容器正确地增长或缩小。

然而，Internet Explorer 决定不玩好游戏。

发生了什么，

包含 jQueried div 的 div 已正确增长或缩小，但 ~~包含该 div~~ 包含包含该 div 的 div 保持相同的高度。

现在烦人的是，我不认为这是一个 css 问题，因为一旦我做了一些导致窗口重新绘制（调整大小/调出开发人员工具等）的事情，这个问题就会自行解决。

为什么会这样，我该如何解决？

包装器 div css

background: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), to(#D9D9D9));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = 'white', endColorstr = '#D9D9D9');
background: -moz-linear-gradient(270deg, white, #D9D9D9);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 10px;
-moz-border-radius: 0 0 10px 0;
padding: 10px;
float: left;
width: 710px;

包装器包装器 div css

background-color: #D4D3D1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
border: 1px solid #8B8B8B;

.clearfix {
display: inline-block;
}

.clearfix::after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

包装器包装器包装器div css

background-color: white;
padding: 10px;

【问题讨论】：

听起来像是 hasLayout 问题 - 尝试将 css zoom: 1 添加到行为奇怪的容器中
不确定这是否能解决问题，但您的 .clearfix::after 应该只有一个冒号。

标签： jquery css internet-explorer

【解决方案1】：

我曾经遇到过类似的问题。父 div 似乎“不知道”子 div 缩小和增长。如果我是你，我会将一个函数绑定到子 div 的调整大小事件 (http://goo.gl/mvBX9) 并动态更改父 div 的 css 属性。

【讨论】：

【解决方案2】：

尝试在包装器上使用overflow: hidden，这样它就可以从它的孩子那里得到它的尺寸。

你可以在这里看到一个非常简单的例子：http://jsfiddle.net/YqQDD/

这适用于 ie7 和 ie8

【讨论】：