如何以%为单位获取跨浏览器表单`fieldset`内容高度(带图例)
M D*_*nis 5 html css forms cross-browser fieldset
我想在设置%了height一个div包含在fieldset,但浏览器不计算相同的方式的内部高度fieldset ,当你使用legend!
Firefox:height: 100%考虑图例的高度:没关系.
Chrome:height: 100%不考虑图例的高度:它溢出.
Internet Explorer:height: 100%不考虑图例的高度:它溢出.
1.您是否知道一个干净的解决方案,以便在3个浏览器中获得相同的结果？
2.与W3C建议相比,哪个是正确的？
以下是用于进行测试的代码:
<html>
<body>
<fieldset style="height:60px;width:150px;">
<legend>Legend</legend>
<div style="height:100%;width:100%;margin:0;padding:0;background-color:#FF0000;">
DIV : height 100%
</div>
</fieldset>
</body>
</html>
这是一个有趣的案例。
对于你的第二个问题：这可能是由于W3C HTML5 标准规范对元素的视觉表示非常模糊而引起的<legend>。浏览器不一致的历史 由来已久。 <legend>
要回答您的问题 1. 并提出跨浏览器一致的位置legend：
为了解决计算错误，您必须从内容流中删除图例，例如通过添加float到它。然后你需要相对地重新定位它，456bereastreet.com提出了一个同级选择器来清除float紧随其后的选择器。
演示： https:
//codepen.io/Volker_E/full/zqPjrK/
内联样式之上的 CSS 代码：
fieldset {
position: relative;
margin: 0;
border: 1px solid #000;
padding: 0;
}
legend {
float: left;
margin-top: -1em;
line-height: 1em;
}
legend + * { /* @link: http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ */
clear: both;
}
这确实是浏览器差异（错误？）或模糊的规范，这不允许在不影响legend流程的情况下保持一致的样式。