我的 HTML 有问题fieldsetChrome 中的元素。
我想要一个固定高度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>