当前位置： 文江博客话题详情

使用溢出时的 WebKit 渲染问题：隐藏；

发布于 2024-10-01 19:48:56 字数 5040 浏览 8 评论 0原文

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

从此源创建一个页面，然后在 WebKit 浏览器（Safari、Chrome）中呈现。单击“展开”按钮，您将看到设置了overflow:hidden;并且现在应该根据展开的父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>
原文

I've run into what seems to be a rendering issue in webkit when using overflow: hidden; on a child div and then increasing the height of a parent div using javascript. I've boiled my issue down to the following sample code.

Create a page from this source and then render in a WebKit browser (Safari, Chrome). Click on the "Expand" button and you will see that the divs that have overflow: hidden; set and should now be displayed based on the expanded parent div height don't show up. In Gecko (Firefox) and Trident (ID) browsers this works fine.

Any ideas or suggestions for work arounds? Basically, I want to hand build a table of divs that contain text within a parent div and I don't want the text to wrap or extend beyond the div boundaries. I need to be able to adjust the height of the parent div based on other things happening on the page.

Thanks!
Bart

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

初与友歌 2024-10-08 19:48:56

编辑：现在我有一点时间再次思考这个问题，我意识到我在原始答案中所说的内容都是真实的，但简而言之，这是一个回流问题，因为它仅在您增加高度。由于这是一个回流问题，解决方案非常简单，添加position:relative:

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

验证现在效果很好。出于教育目的，我将保留原始答案。

我真的没有一个好的解决方案给你，但我认为你的问题不仅仅是溢出：隐藏。这是float+overflow:hidden的组合。如果您删除浮动，例如将元素绝对定位在页面上，则您的脚本在 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>

奇怪的是，设置溢出可以起到浮动清除的作用。它不会清除元素上的浮动，它会自行清除。这意味着应用了溢出（自动或隐藏）的元素将扩展至需要包含浮动（而不是折叠）内部子元素的大小，假设未声明高度。

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

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

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

Edit: Now that I had a bit of time to think about this again, I realized that the stuff I was saying in the original answer is true and all, but this is a reflow issue in the nutshell, since it's only showing up when you increase the height. And since it's a reflow issue, the solution is very simple, add position: relative:

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

Verified that this works now just fine. I'm going to leave the original answer in tacked for educational purposes.

I don't really have a good solution for you, but I think your issue is about more than just overflow: hidden. This is a combination of float + overflow: hidden. If you remove floats and, for example, position elements absolutely on the page, your script works fine in WebKit browsers. No issues with overflow. I'm not sure if that's something you want to do though. The problem is that overflow actually, doesn't only control whether your content is going to show if the container is too small, but in conjunction with floats, it also can set the sizes of the containers themselves.

Here's a very simple example of it:

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

Setting overflow, strangely enough, is working as float clearing. It doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared.

I think because of that, you are having issues with your design.

I suggest you use display: table-cell, if all of the items are supposed to be equal height, table layout if you are not div purist, or absolute positioning.

P.S. Sorry, it probably should've been a comment instead of the answer, since I don't really provide a good solution, but it was too long for a comment.

回复 原文
妄断弥空 2024-10-08 19:48:56

我太接近崩溃了，无法在晚上的这个时候复制粘贴测试您的代码（好吧，我现在是晚上），但假设您的问题是给定包含元素的后代元素不会回流正确地，当您更改相关样式时，请尝试

expand_container.className = expand_container.className;

在样式更改后立即添加：。看起来它不应该做任何事情，但在我测试过的每个浏览器中，它都会导致浏览器回流容器及其所有内容，这应该可以解决问题。

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

I'm too close to crashing out to copy-paste-test your code at this time of night (well, it's night where I am), but assuming that your problem is that the descendant elements of a given containing element don't reflow correctly when you change the relevant style, try also adding:

expand_container.className = expand_container.className;

immediately after the style change. It looks like it shouldn't do anything, but in every browser I've tested it causes the browser to reflow the container and all its contents, which should fix things.

You might also want to report this as a bug at http://bugs.webkit.org/ if it isn't a known bug.

回复 原文
酷炫老祖宗 2024-10-08 19:48:56

我设法找到了一个稍微难看的解决方法来修复它（注意：不妨跳到底部......我想出了一个更好的解决方案）。在 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";
};

等等...

编辑：

仅供参考，如果您不想通过添加内部元素来更改 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);

I managed to find a slightly ugly workaround that fixes it (note: might as well skip to the bottom....I came up with a better solution). Inside the expand_container element, I added another div, that contains the other elements. In the expand and contract functions, I remove that element from its parent (the expand_container), size the expand_container, and then add that div back. The issue no longer happens.

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

then...

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

Edit:

FYI, if you don't want to change your dom structure by adding that inner element, instead you can yank all the children of expand_container, then add them all back after sizing it. For instance:

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]);

Possibly slow if you've got a zillion elements, but on your example it works like a charm.

Edit 2: ok, just thought of something that works even better....remove expand_container and add it back in the same place. Again, works fine (even if nextSibling is null):

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);
回复 原文
~没有更多了~

关于作者

乖乖

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

诺曦

文章 0 评论 0

要走干脆点

文章 0 评论 0

把回忆走一遍

文章 0 评论 0

陌上青苔

文章 0 评论 0

Arthur

文章 0 评论 0

哄哄

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文