4

我对fieldsetChrome 中的 HTML 元素有疑问。

我想要一个 fixed-height fieldset，并在其中有一个 scrollable 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>

截屏

4

3 回答 3

1

如果您不需要使用该legend元素，另一种解决方案是适当地使用h1and 样式。这在 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>

于 2011-05-16T15:24:53.177 回答
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。

于 2014-04-10T18:51:35.330 回答
0

我看到溢出。

看起来好像fieldset div应用了太多的高度。尝试

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

在 Chrome 中为我工作。

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

于 2011-05-16T14:34:18.687 回答