Question

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<fieldset>
    <legend>overflow test <a href=#1 onclick="insertDiv();">insertDiv</a></legend>
    <div id="box">
        <div style="width:5000px;border:1px solid orange;">init div is overflow </div>
    </div>
</fieldset>
<script>
function getObj(id) {
    return document.getElementById(id);
}

function insertDiv() {
    var div = document.createElement('DIV');
    div.style.width = '10000000px';
    div.style.border = '1px solid red';
    div.title = 'it is overflow';
    getObj('box').appendChild(div);
}
</script>
</body>
</html>

它会显示

----
|  |
__________________ this is the insert div
|  |
|  |
----

我该怎么办？

此链接是bug测试博客文章，它包含所有错误图像。 bad layout img

Answer 1

对我来说很好看，这里是代码我添加了一些HTML来显示包含div的大纲。我还通过innerHTML向插入的div添加了一些内容。

溢出测试insertDiv init div溢出

<script>
function getObj(id) {
    return document.getElementById(id);
}

function insertDiv() {
    var div = document.createElement('DIV');
    div.style.width = '10000000px';
    div.style.border = '1px solid red';
    div.title = 'it is overflow';
    div.innerHTML = 'test content for insert div';
    getObj('box').appendChild(div);
}
</script>

点击“insertDiv”链接后，这就是它的样子：

enter image description here

除非我误解了这个问题。根据我的理解，你想要在'box'div中插入div，并且'box'div自动增长以包含它。

这是一个jsFiddle，您可以查看它并使用它：http://jsfiddle.net/luisperezphd/gxhrx/

即FIELDSET标签自动与窗口大小相同但不是内容，并且内容溢出

1 个答案: