HTML字段集内容在100%高度溢出（Chrome）
我对Chrome中的HTMLHTML字段集内容在100%高度溢出（Chrome）,html,css,google-chrome,fieldset,Html,Css,Google Chrome,Fieldset,我对Chrome中的HTMLfieldset元素有问题 我希望有一个固定高度的字段集，其中有一个可滚动的div。在我放入图例之前，一切看起来都很好-当我这样做时，div从字段集的底部溢出。我还签入了Firefox，但它并没有做到这一点（也就是说，完全按照我的预期） 还有人看到这个吗？这是一个Chrome bug吗？有人知道这有没有黑客 <!DOCTYPE HTML> <html> <head> <title>a</ti
fieldset字段集div图例之前，一切看起来都很好-当我这样做时，div
从字段集的底部溢出。我还签入了Firefox，但它并没有做到这一点（也就是说，完全按照我的预期）
还有人看到这个吗？这是一个Chrome bug吗？有人知道这有没有黑客
<!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>
A.
字段集{
高度：80px；
}
字段集分区{
身高：100%；
溢出y：滚动；
}
试验
福
福
福
福
福
福
我看到溢油了
看起来字段集div
应用的高度太高了。试一试
fieldset div {
height: 85%;
overflow-y: scroll;
}
在Chrome中为我工作
当然，如果没有图例的代码，我不确定是否还有其他问题 如果您不需要使用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>
A.
字段集{
高度：80px；
}
h1{
保证金：0；
边缘顶部：-1米；
字号：1em；
背景：白色；
宽度：33px；
}
字段集分区{
身高：100%；
溢出y：滚动；
}
试验
福
福
福
福
福
福
我可以通过将padding bottom
添加到仅适用于Chrome的字段集来让它工作。这平衡了一些额外的高度%。这很好，因为它即使在调整大小时也能工作（相对一致）
if（navigator.userAgent.toLowerCase（）.indexOf（'chrome'）{//用您首选的检查userAgent的方法替换它
$（'fieldset'）.css（'padding-bottom'，'4%'）；//确切的百分比可能会有所不同
}
需要注意的是，我发现这至少在IE8-IE11中也是一个问题，因此该修复可以应用于IE。在chrome中对我来说很好。顺便说一句，它的
@丹尼尔：啊，当然是了！对不起，太晚了，我有点迟钝；我会编辑它。但这并没有改变我的问题。在Ubuntu上的Chrome11.0.696.57上测试。我会考虑做一个screenie。测试这个我使用Win Chrome 11.0.696.65首先，JSFIDLE删除了默认的字段集
样式，所以你必须至少添加边框：1px纯黑
，才能注意到效果。它可能在Win build上运行，但在我的Ubuntu上，我得到的结果与上面的屏幕截图基本相同（模边距，被JSFIDLE的重置脚本剥离）。我有带Chrome 11.0.696.68的Windows 7，它看起来与屏幕截图相似，所以我想这不是发布它的平台的错。当然，降低高度也会起作用，但是，如果我调整字段集的大小，它将不会执行我想要的操作（即始终填充字段集的整个内部区域）。此外，height:100%
至少在Firefox上能够正确渲染，因此它将在85%
中崩溃。因此，我不能接受这个答案。我在Firefox 3.6.6中进行了检查，同样的问题在100%时发生。。。div
溢出字段集。然而，Chrome和FF对我来说都能以85%的速度工作。85%
“有效”，只是不能满足我的需要。这有点像告诉一个机械师，当你的车速超过20公里/小时时，你的引擎盖就会弹出，他告诉你解决办法是只开得很慢。明白了。看看下面的另一个解决方案。是的，这个黑客似乎正是我想要的。谢谢（事实上，我更喜欢legend
像它应该的那样工作，但不能拥有一切：））再三考虑——仍然没有做我想做的一切。必须为h1
指定宽度是一个问题。