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>
最佳答案
如果您不需要使用 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>
关于HTML Fieldset 内容在 100% 高度溢出 (Chrome)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6018760/