HTML 字段集内容在 100% 高度溢出 (Chrome)

Question

Chrome 中的 HTML fieldset 元素有问题。

我想要一个固定高度的fieldset，并在其中有一个可滚动的div。在我输入legend 之前，一切看起来都很好——当我这样做时，div 从fieldset 的底部溢出。我还检查了 Firefox，但它并没有这样做（即完全符合我的预期）。

还有人看到这个吗？是 Chrome 的错误吗？有人知道这是否有破解方法吗？

<!DOCTYPE HTML>
<html>
    <head>
        <title>a</title>
        <style>
            fieldset {
                height: 80px;
            }
            fieldset div {
                height: 100%;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Test</legend>
            <div>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
            </div>
        </fieldset>
    </body>
</html>

Answer 1

我可以通过将padding-bottom 添加到仅适用于 Chrome 的字段集来使其正常工作。这平衡了一些额外的高度％。很好的是，即使在调整大小时它也能正常工作（相对一致）。

if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}

作为说明，我发现这至少在 IE8 - IE11 中也是一个问题，因此可以将修复程序应用于 IE。

Answer 2

如果您不需要使用legend 元素，另一种解决方案是使用h1 并适当地设置样式。这在 Chrome 和 FF 中都适用于我。

<!DOCTYPE HTML>
<html>
<head>
    <title>a</title>
    <style>
        fieldset {
            height: 80px;
        }
            h1 {
                margin:0;
                margin-top:-1em;
                font-size:1em;
                background:white;
                width:33px;
            }   
        fieldset div {
            height: 100%;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <fieldset>
        <h1>Test</h1>
        <div>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
        </div>
    </fieldset>
</body>

Answer 3

我看到了溢出。

看起来fieldset div 应用了太多高度。试试

fieldset div {
            height: 85%;
            overflow-y: scroll;
        }

在 Chrome 中为我工作。

当然，如果没有图例的代码，我不确定是否还有其他问题。