2

我在使用溢出时遇到了 webkit 中的渲染问题：隐藏；在子 div 上，然后使用 javascript 增加父 div 的高度。我将我的问题归结为以下示例代码。

从此源创建一个页面，然后在 WebKit 浏览器（Safari、Chrome）中呈现。点击“展开”按钮，你会看到有溢出的div：隐藏；设置，现在应该根据展开的父 div 高度显示不显示。在 Gecko (Firefox) 和 Trident (ID) 浏览器中，这可以正常工作。

任何解决方法的想法或建议？基本上，我想手动构建一个 div 表，其中包含父 div 中的文本，并且我不希望文本换行或超出 div 边界。我需要能够根据页面上发生的其他事情来调整父 div 的高度。

谢谢！巴特

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />

<style type="text/css">

    #test_container {
        width: 540px;
    }

    .column_allow_overflow {
        float: left;
        width: 100px;
        height: 16px;
        margin-left: 4px;
        padding: 3px;
    }

    .column_no_overflow {
        float: left;
        width: 100px;
        height: 16px;
        margin-left: 4px;
        padding: 3px;
        overflow: hidden;
    }

    .background {
        background-color: #444444;
        color: #e5e5e5;
    }

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

    #expand_container {
        overflow:scroll;
        overflow-x: hidden;
        -ms-overflow-x: hidden;
        height: 100px;
        width: 100%;
        background-color: #cccccc;
    }



</style>

</head>
<body>

<div id="test_container">
<div class="data_row background">
    <button type="button" id="expand_button" onclick="expand();">Expand</button>
</div>
<div id="expand_container">
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
    <div class="data_row background">
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
        <div class="column_allow_overflow background">
            Overflow allowed
        </div>
        <div class="column_no_overflow background">
            Overflow NOT allowed
        </div>
    </div>
</div>  
</div>  

<script>

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

    button.onclick = contract;

    expand_container.style.height = '160px';
    button.innerHTML = "Contract";
};

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

    button.onclick = expand;

    expand_container.style.height = '100px';

    button.innerHTML = "Expand";
};                  

</script>

</body>
</html>
4

3 回答 3

1

编辑：现在我有一点时间再次考虑这个问题，我意识到我在原始答案中所说的都是真的，但简而言之，这是一个回流问题，因为它只会在你出现时出现增加高度。而且既然是回流问题，解决方法也很简单，加上position: relative：

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

验证这现在可以正常工作。出于教育目的，我将保留原始答案。

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

这是一个非常简单的例子：

<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>

奇怪的是，设置溢出就像清除浮动一样。它不会清除元素处的浮动，它会自动清除。这意味着应用了溢出（自动或隐藏）的元素将根据需要扩展到包含浮动的子元素（而不是折叠），假设没有声明高度。

我认为正因为如此，您的设计存在问题。

我建议您使用 display: table-cell，如果所有项目都应该是相等的高度，如果您不是 div 纯粹主义者，则使用表格布局或绝对定位。

PS对不起，它可能应该是评论而不是答案，因为我并没有真正提供一个好的解决方案，但是评论太长了。

于 2010-11-21T04:14:12.347 回答
0

我设法找到了一个稍微难看的解决方法来修复它 （注意：不妨跳到底部......我想出了一个更好的解决方案）。在 expand_container 元素中，我添加了另一个包含其他元素的 div。在扩展和收缩函数中，我从其父元素（expand_container）中删除该元素，调整expand_container 的大小，然后将该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">
...

然后...

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

ETC...

编辑：

仅供参考，如果您不想通过添加该内部元素来更改 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：好的，只是想到了一些更好的方法....删除 expand_container 并将其添加回同一个地方。同样，工作正常（即使 nextSibling 为空）：

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);
于 2010-11-21T04:31:37.360 回答
0

我太接近崩溃了，无法在这个晚上复制粘贴测试您的代码（嗯，这是我所在的夜晚），但假设您的问题是给定包含元素的后代元素不会重排正确更改相关样式时，请尝试添加：

expand_container.className = expand_container.className;

风格改变后立即。看起来它不应该做任何事情，但是在我测试过的每个浏览器中，它都会导致浏览器重排容器及其所有内容，这应该可以解决问题。

如果它不是已知的错误，您可能还想在http://bugs.webkit.org/ 上将其报告为错误。

于 2010-11-21T05:35:53.317 回答