HTML 字段集内容在 100% 高度溢出 (Chrome)
Posted
技术标签:
【中文标题】HTML 字段集内容在 100% 高度溢出 (Chrome)【英文标题】：HTML Fieldset content overflows at 100% height (Chrome) 【发布时间】：2013-02-13 12:02:26 【问题描述】：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>
【问题讨论】：
对我来说在 chrome 中看起来不错。顺便说一句，<br />！
@DanielB：Doh，当然是！抱歉，来晚了，我迟钝了；我会编辑它。但这并没有改变我的问题。在 Ubuntu 上的 Chrome 11.0.696.57 上测试。我会考虑做一个筛选。
测试这个fiddle我用的是Win Chrome 11.0.696.65
首先，jsfiddle 移除了默认的fieldset 样式，所以你至少必须添加border: 1px solid black，才能注意到效果。它可能适用于 Win 版本，但在我的 Ubuntu 上，我得到的结果与上面的屏幕截图中的几乎相同（模边距，被 jsfiddle 的重置脚本剥离）。
我有 Windows 7 和 Chrome 11.0.696.68，它看起来与屏幕截图相似，所以我想这不是它发布的平台的错。
【参考方案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。
【讨论】：
【参考方案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>
【讨论】：
是的，这个 hack 似乎正是我想要的。谢谢！ （实际上，我更喜欢legend 正常工作，但不能拥有一切 :)）
再想一想 - 仍然没有做我想做的一切。必须为 h1 指定宽度是个问题。【参考方案3】：
我看到了溢出。
看起来fieldset div 应用了太多高度。试试
fieldset div
height: 85%;
overflow-y: scroll;
在 Chrome 中为我工作。
当然，如果没有图例的代码，我不确定是否还有其他问题。
【讨论】：
当然，降低高度会起作用，但是如果我调整fieldset 的大小，它不会做我想要的（即总是填充 fieldset 的整个内部区域）。此外，height: 100% 至少可以在 Firefox 上正确呈现，因此它会与85% 分崩离析。因此，我不能接受这个答案。
我在 Firefox 3.6.6 中检查过，同样的问题发生在 100%...div 溢出了fieldset。但是，Chrome 和 FF 对我来说都是 85%。
85%“工作”，只是没有做我想做的事。这有点像告诉机械师，当您的车速超过 20 公里/小时时，您的发动机罩就会弹出，而他告诉您解决方案就是开得非常慢。
明白了。请参阅下面的另一个解决方案。以上是关于HTML 字段集内容在 100% 高度溢出 (Chrome)的主要内容，如果未能解决你的问题，请参考以下文章