gpt4 book ai didi

html - 如何获取跨浏览器表单 `fieldset` 内容高度百分比(带图例)

转载 作者:太空狗 更新时间:2023-10-29 16:40:35 25 4
gpt4 key购买 nike

我想% 中设置 fieldset 中包含的 divheight/强>,但是当您使用 legend 时,浏览器不会以相同的方式计算 fieldset 的内部高度 !

Firefox: height: 100% 考虑图例的高度:没问题。
enter image description here

Chrome: height: 100% 不考虑图例的高度:它会溢出。
enter image description here

Internet Explorer:height: 100% 不考虑图例的高度:它会溢出。
enter image description here

<强>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 standard spec<legend> 元素的视觉表示非常模糊。在 <legend> 周围存在浏览器不一致的 a long history

回答你的问题 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 脱离流程的情况下保持一致的样式。

关于html - 如何获取跨浏览器表单 `fieldset` 内容高度百分比(带图例),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29967730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com