Html 如何获取跨浏览器表单`fieldset`内容高度（以%（带图例）_Html_Css_Forms_Cross Browser_Fieldset

Html 如何获取跨浏览器表单`fieldset`内容高度（以%（带图例）

html css forms

Html 如何获取跨浏览器表单`fieldset`内容高度（以%（带图例）,html,css,forms,cross-browser,fieldset,Html,Css,Forms,Cross Browser,Fieldset,我想设置%包含在字段集中的div的高度，但是当您使用legend时，浏览器不会以相同的方式计算字段集的内部高度火狐：高度：100% < /代码>考虑传说的高度：没关系。 Chrome：高度：100% 不考虑图例的高度：它溢出。 Internet Explorer：高度：100% 不考虑图例的高度：它溢出。 1。您知道一个干净的解决方案可以在3种浏览器中获得相同的结果吗？ 2。与W3C建议相比，哪个是正确的？以下是用于进行测试的代码： <html> <body&g

我想设置
%
包含在

字段集中的div
的高度，
但是当您使用legend时，浏览器不会以相同的方式计算字段集的内部高度
火狐：<代码>高度：100% < /代码>考虑传说的高度：没关系。

 Chrome：<代码>高度：100% 不考虑图例的高度：它溢出。


 Internet Explorer：<代码>高度：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>


传奇
分区：高度100%
我对同一个问题感到非常疯狂，我发现了一个用于规范化字段集的css片段，它是正确的，在我的情况下，我不得不删除一些不必要的属性，我也删除了旧的IE版本支持
这就是我用来解决评论不必要的行和IE支持问题的方法：
fieldset {
    margin: 0px; padding: 0px; display: block; position: relative; width: 100%;
    //%border-top: none !important; /* for IE7, does not work with Webkit */
    //_padding-top: 3em; /* for IE6 */
}
fieldset > * {
    width: auto;
    //%width: auto !important; /* for IE7 */
    // margin-left: 1.5em; /* emulating fieldset padding-left */
    // margin-left: 1.5em !important;  /* for IE7 */
}
fieldset *:first-child + * {
    // margin-top: 3em; /* emulating fieldset padding-top */
}
fieldset:last-child {
    margin-bottom: 1.5em; } /* emulating fieldset pading-bottom */
legend {
    width: 100%;
    //%width: 100% !important; /* for IE7 */
    position: absolute;
    top: -1px; left: -1px; /* hide the fieldset border */
    margin: 0px !important; /* suppress all margin rules */
    line-height: 2em; /* emulating padding-top/bottom */
    text-indent: 1.5em; /* emulating padding-left */
    //%left: -8px; 
} /* for IE7 */


/* user format */
fieldset, legend {
    border: 1px solid #ddd;
    background-color: #eee;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
legend {
    font-weight: normal;
    font-style: italic;
    font-size: 1.2em;
    text-shadow: #fff 1px 1px 1px; }
fieldset {
    background-color: #f7f7f7;
    width: 360px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px; }

这是我第一次尝试帮助stackoverflow，通常我只看答案。原稿和片段已经打开了
了解Fieldset如何在不同的浏览器中工作真的非常有用，希望它能让其他人免于沮丧
Pd：如果我的英语不够好，很抱歉，但希望你能完全理解它
这是一个有趣的案例。

对于第二个问题：它可能是由于
元素的视觉表示非常模糊而产生的。关于
，存在着浏览器不一致的问题
回答你的问题1。并提出一个跨浏览器一致的位置图例：

为了解决计算错误，您必须从内容流中删除图例，例如，向其添加float
。然后，您需要相对地重新定位它，并立即使用同级选择器清除浮点值
演示：


内嵌样式顶部的CSS代码：
字段集{
位置：相对位置；
保证金：0；
边框：1px实心#000；
填充：0；
}
传奇{
浮动：左；
边缘顶部：-1米；
线高：1米；
}
图例+*{/*@链接：http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ */
明确：两者皆有；
}

这确实是浏览器的差异（bug？）或含糊不清的规范，不允许在保持legend
流畅的情况下保持一致的样式
 这是一个老话题，但对某些人仍然有用（我的解决方案在下面）
我一整天都在寻找解决办法，但没有找到。我想在chrome、firefox、edge、opera和IE11中正确显示它（这可能也适用于IE10）
“Float”或“position:absolute；”并不能解决我的问题，因为它删除了图例的透明背景。我想让它保持在字段集的边界上，同时保持其透明的背景（这样人们就看不到它下面的边界）
我尝试使用负的上/下页边距，但是firefox出现了一个问题（事实上，firefox是唯一正确显示图例的浏览器）
我是如何解决的：
我刚刚在图例中添加了“行高：0；”（无单位），现在它可以正确显示。
通过这种方式，我成功地获得了文件集的完整高度，从上到下的边框（没有底部溢出），内容与图例重叠。
现在，这可以通过文件集的填充来解决（将内容从标签上拆下和/或使用字段集上的顶部/底部填充将其垂直居中等）
如果您需要图例上的边框，可以使用绝对定位的伪元素（宽度100%，高度以px/em/rem表示，顶部50%，左侧：0，translateY-50%）来实现，因为图例上的填充（即使是负边距）也会带来同样的问题
我在上述所有浏览器中，在Windows8.1上进行了测试
我还没有在手机或safari上测试过它。我将在几个移动浏览器（android）上测试它，但如果有人在safari上检查它，那就太好了。
仍然没有答案吗？：（为示例测试添加了一个代码笔：谢谢Alan的回答…但这不是我真正搜索的内容：它不是标准的，内部DIV的顶部在图例下方，而不是图例的底部…您的解决方案需要修改现有页面的许多页面…很高兴我能提供帮助！如果我有更多时间，我会将它放在下面。）将bug报告到Chromium bug Tracker中，并查看开发人员对规范解释的响应：