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

Question

I want to set in % the height of a div included in a fieldset , but browsers don't calculate the same way the inside height of the fieldset when you use legend !我想在%中设置fieldset包含的div的height ，但是当您使用legend时，浏览器不会以相同的方式计算fieldset的内部高度！

Firefox: height: 100% consider the height of the legend: it's ok. Firefox: height: 100%考虑图例的高度：没关系。
在此处输入图片说明

Chrome: height: 100% does NOT consider the height of the legend: it overflows. Chrome: height: 100%不考虑图例的高度：它溢出。
在此处输入图片说明

Internet Explorer: height: 100% does NOT consider the height of the legend: it overflows. Internet Explorer: height: 100%不考虑图例的高度：它溢出。
在此处输入图片说明

1. Do you know a clean solution to have the same result in the 3 browsers? 1.你知道一个干净的解决方案在3个浏览器中得到相同的结果吗？

2. Which is right compared to W3C recommendations? 2. 与 W3C 的建议相比，哪个是正确的？

Here is the code used to make the test:这是用于进行测试的代码：

<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>

Answer 1

This is an interesting case.这是一个有趣的案例。
To your 2nd question: It might arise out of W3C HTML5 standard spec being very vague of the visual representation of <legend> element.对于您的第二个问题：这可能是因为W3C HTML5 标准规范对<legend>元素的视觉表示非常模糊。 There has been a long history of browser inconsistencies around <legend> .已经有一个很长的历史浏览器不一致的周围<legend> 。

To answer your question 1. and come up with a cross-browser consistent position of legend :回答你的问题 1. 并提出一个跨浏览器一致的legend位置：
In order to get the miscalculation resolved, you have to remove legend from the content flow, for example by adding float to it.为了解决计算错误，您必须从内容流中删除图例，例如通过向其添加float 。 Then you need to reposition it relatively and 456bereastreet.com came up with a sibling selector clearing the float immediately after.然后你需要相对地重新定位它， 456bereasttreet.com想出了一个兄弟选择器，在之后立即清除float 。

Demo:演示：
https://codepen.io/Volker_E/full/zqPjrK/ https://codepen.io/Volker_E/full/zqPjrK/

CSS code on top of your inline styles:内联样式之上的 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;
}

It is indeed browser differences (bugs?) or vague spec, which don't allow to style it consistently without taking legend out of flow.这确实是浏览器差异（错误？）或模糊的规范，这不允许在不使legend脱离流程的情况下始终如一地对其进行样式设置。

Answer 2

I was going crazy with the same issue and I've found a css snippet for normalizing fieldsets, And it goes right, in my case I had to remove some properties that are unnecesary, I've removed the old IE versions support too.我对同样的问题发疯了，我找到了一个用于规范化字段集的 css 片段，它是对的，在我的情况下，我不得不删除一些不必要的属性，我也删除了旧的 IE 版本支持。

this is what I've used to solve my problem commenting unnecesary lines and IE support:这就是我用来解决评论不必要的行和 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; }

This is the first time I try to help on stackoverflow, usually I only read the answers.这是我第一次尝试帮助 stackoverflow，通常我只阅读答案。 Well the original and Snippet is on https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6好吧，原始和片段位于https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6

Really, really usefull to understand how fieldsets works around different browsers, hope it can save others from frustration.真的，了解字段集如何在不同浏览器上工作非常有用，希望它可以让其他人免于沮丧。

Pd: Sorry if my english isn't good enough, but hope you can understand it perfectly Pd：对不起，如果我的英语不够好，但希望你能完全理解

Answer 3

This is an old topic, but still can be useful to someone ( my solution is below ).这是一个古老的话题，但仍然对某人有用（我的解决方案如下）。

I searched all day for a solution and did not find it.我搜索了一整天的解决方案，但没有找到。 I want to display it correctly in chrome, firefox, edge, opera and IE11 (which will probably also work on IE10).我想在chrome、firefox、edge、opera 和 IE11 （可能也适用于 IE10）中正确显示它。

"Float" or "position: absolute;" “浮动”或“位置：绝对；” does not solve the problem for me, because it removes the transparent background of the legend.对我来说没有解决问题，因为它删除了图例的透明背景。 I want to keep it on the fieldset 's border and also keep its transparent background (so as one does not see the border beneath it).我想将它保留在 fieldset 的边框上并保留其透明背景（这样就看不到它下面的边框）。

I tried with negative top/bottom margins, but then I have a problem in firefox (which infact is the only one who displays the legend correctly).我尝试使用负的顶部/底部边距，但后来我在 Firefox 中遇到了问题（事实上，这是唯一一个正确显示图例的）。

How I solved it:我是如何解决的：

I just put " line-height: 0; " (no unit) on my legend and now it displays it correctly.我只是将“ line-height: 0; ”（无单位）放在我的图例上，现在它可以正确显示它。 This way I managed to get the full height of the filedset, from top to bottom border (without the bottom overflow), with overlapping the content with the legend .通过这种方式，我设法获得了文件集的完整高度，从上到下边界（没有底部溢出），并将内容与图例重叠。 Now this can be solved with filedset's padding (detach the content from the label and/or vertically center it with top/bottom padding on the fieldset etc.).现在，这可以通过文件集的填充来解决（将内容与标签分离和/或在字段集上使用顶部/底部填充将其垂直居中等）。

If you need a border on the legend, you can do it with an absolutely positioned pseudo-element (width 100%, height in px/em/rem, top 50%, left: 0, translateY -50%), because padding on legend (even with negative margins) will bring back the same problem.如果您需要图例上的边框，您可以使用绝对定位的伪元素（宽度为 100%，高度为 px/em/rem，顶部 50%，左：0，translateY -50%）来完成，因为填充在图例（即使是负边距）也会带来同样的问题。

I tested this in all above-mentioned browsers, on Windows 8.1 .我在Windows 8.1上的所有上述浏览器中对此进行了测试。

I have not tested it on mobile or safari.我还没有在手机或 safari 上测试过它。 I will test it on several mobile browsers (android), but if there's someone to check it on safari, it would be nice.我将在几个移动浏览器（android）上测试它，但如果有人在 safari 上检查它，那就太好了。

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-04-05 22:48:46

解决方案2
0 2015-10-21 15:47:03

解决方案3
0 2020-07-27 17:38:38

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-04-05 22:48:46

解决方案2 0 2015-10-21 15:47:03

解决方案3 0 2020-07-27 17:38:38

解决方案1
1 已采纳 2016-04-05 22:48:46

解决方案2
0 2015-10-21 15:47:03

解决方案3
0 2020-07-27 17:38:38