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>

Screenshot

Answer 1

如果您不需要使用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 2

我能够通过将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 3

我看到了溢出。

看起来fieldset div的高度太高了。尝试

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

在Chrome中为我工作。

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

HTML Fieldset内容溢出100％高度（Chrome）

3 个答案: