Javascript 使用溢出时WebKit呈现问题：隐藏；

我在使用overflow:hidden时遇到了webkit中的渲染问题；然后使用javascript增加父div的高度。我将我的问题归结为以下示例代码

从该源创建页面，然后在WebKit浏览器（Safari、Chrome）中呈现。单击“展开”按钮，您将看到溢出的div：隐藏；现在应根据展开的父div height不显示来显示set和。在Gecko（Firefox）和Trident（ID）浏览器中，这很好

对解决办法有什么想法或建议吗？基本上，我想手工构建一个div表，其中包含父div中的文本，我不希望文本环绕或延伸到div边界之外。我需要能够根据页面上发生的其他事情调整父div的高度

谢谢！ 巴特

#测试容器{
宽度：540px；
}
.列\u允许\u溢出{
浮动：左；
宽度：100px；
高度：16px；
左边距：4倍；
填充：3倍；
}
.列\u无\u溢出{
浮动：左；
宽度：100px；
高度：16px；
左边距：4倍；
填充：3倍；
溢出：隐藏；
}
.背景{
背景色：#4444；
颜色：#E5；
}
.data_行{
高度：22px；
宽度：100%；
填充底部：22px；
背景色：#中交；
}
#展开容器{
溢出：滚动；
溢出x：隐藏；
-ms-overflow-x：隐藏；
高度：100px；
宽度：100%；
背景色：#中交；
}
扩大
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
允许溢出
不允许溢出
变量扩展=函数（e）{
var button=document.getElementById（'expand_button'）；
var expand_container=document.getElementById（'expand_container'）；
button.onclick=合同；
展开_container.style.height='160px'；
button.innerHTML=“合同”；
};
var合同=功能（e）{
var button=document.getElementById（'expand_button'）；
var expand_container=document.getElementById（'expand_container'）；
button.onclick=展开；
展开_container.style.height='100px'；
button.innerHTML=“展开”；
};                  

编辑：现在我有一点时间再次思考这个问题，我意识到我在原始答案中所说的内容是真实的，但这是一个简单的回流问题，因为它只在你增加高度时才会出现。由于这是一个回流问题，解决方案非常简单，添加位置：相对：

.data_row { 
    position: relative;
    height: 22px; 
    width: 100%; 
    padding-bottom: 22px; 
    background-color: #cccccc; 
}

已验证此功能现在可以正常工作。为了教育的目的，我将保留原始答案

我真的没有一个好的解决方案给你，但我认为你的问题不仅仅是溢出：隐藏。这是浮动+溢出的组合：隐藏。例如，如果删除浮动并将元素绝对放置在页面上，则脚本在WebKit浏览器中工作正常。没有溢出问题。我不确定你是否想这么做。问题是溢出实际上不仅控制内容是否会显示容器是否太小，而且与浮动一起，它还可以设置容器本身的大小

下面是一个非常简单的例子：

<div style="width: 500px; overflow: hidden;">
  <div style="width: 200px; float: left; height: 100%; background-color: red;"></div>
  <div style="width: 200px; float: right; height: 100%; background-color: orange;"></div>
  <div style="background-color: green; overflow: hidden;">aaa</div>
<div>

aaa

奇怪的是，设置溢出就像清除浮动一样。它不会清除元素处的浮动，而是自行清除。这意味着应用了溢出（自动或隐藏）的元素将扩展到所需的大小，以包含内部浮动（而不是折叠）的子元素，前提是未声明高度

我认为正因为如此，您的设计出现了问题

我建议您使用display:table cell（如果所有项目都应该是等高的），table layout（如果您不是div纯粹主义者）或绝对定位

---

另外，很抱歉，它可能应该是一个注释而不是答案，因为我并没有提供一个好的解决方案，但它太长了，无法发表评论。

我设法找到了一个稍微难看的解决方法来修复它（注：不妨跳到底部……我想出了一个更好的解决方案）。在expand_container元素中，我添加了另一个div，它包含其他元素。在expand和contract函数中，我将该元素从其父元素（expand_容器）中移除，调整expand_容器的大小，然后将该div添加回去。这个问题不再发生

<div id="expand_container" >
  <div id="inner_container" style="margin:0; padding:0">  <!-- new element! -->
    <div class="data_row background">
        <div class="column_allow_overflow background">
...

等等

编辑：

仅供参考，如果您不想通过添加该内部元素来更改dom结构，您可以将expand_container的所有子元素拉出来，然后在调整其大小后将它们全部添加回去。例如：

var len = expand_container.childNodes.length, i, a = [];
for (i=len-1; i>=0; i--) 
 a.push(expand_container.removeChild(
      expand_container.childNodes.item(i)));

button.onclick = contract;
expand_container.style.height = '160px';

for (i=len-1; i>=0; i--)
 expand_container.appendChild(a[i]);

如果你有无数的元素，速度可能会慢一些，但在你的例子中，它就像一个符咒

编辑2：好的，就想到s

var expand = function (e) {
    var button = document.getElementById('expand_button');
    var expand_container = document.getElementById('expand_container');

    var inner_container = document.getElementById('inner_container'); // new
    expand_container.removeChild(inner_container); // new
    button.onclick = contract;

    expand_container.style.height = '160px';

    expand_container.appendChild(inner_container); // new
    button.innerHTML = "Contract";
};

var len = expand_container.childNodes.length, i, a = [];
for (i=len-1; i>=0; i--) 
 a.push(expand_container.removeChild(
      expand_container.childNodes.item(i)));

button.onclick = contract;
expand_container.style.height = '160px';

for (i=len-1; i>=0; i--)
 expand_container.appendChild(a[i]);

var next = expand_container.nextSibling;
var parent = expand_container.parentNode;
parent.removeChild(expand_container);

button.onclick = contract;
expand_container.style.height = '160px';

parent.insertBefore (expand_container, next);

expand_container.className = expand_container.className;