如何以 % 的形式获取跨浏览器形式的 `fieldset` 内容高度（带图例）

Question

我想在%中设置div中的height包含在fieldset中，但是当您使用 legend !

时，浏览器不会以相同的方式计算 fieldset 的内部高度
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>

Answer 1

我被同样的问题搞得发疯了，我找到了一个 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; }

这是我第一次尝试在Whosebug上提供帮助，通常我只看答案。好吧，原文和片段在 https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6

对于了解字段集如何在不同的浏览器中工作真的非常有用，希望它可以让其他人免于沮丧。

Pd: 如果我的英语不够好，希望你能完全理解

Answer 2

这是一个有趣的案例。
对于您的第二个问题：这可能是由于 W3C HTML5 standard spec being very vague of the visual representation of <legend> element. There has been a long history 浏览器在 <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 脱离流程的情况下保持一致的样式。

Answer 3

这是一个老话题，但对某些人仍然有用（我的解决方案在下面）。

我整天都在寻找解决方案，但没有找到。我想在 chrome、firefox、edge、opera 和 IE11（可能也适用于 IE10）中正确显示它。

“浮动”或“位置：绝对；”没有为我解决问题，因为它删除了图例的透明背景。我想将它保留在 fieldset 的边框上并保留其透明背景（这样就看不到它下面的边框）。

我尝试使用负 top/bottom 边距，但后来我在 firefox 中遇到了问题（事实上，它是唯一正确显示图例的）。

我是怎么解决的：

我只是将“line-height: 0;”（无单位）放在我的图例上，现在它可以正确显示了。通过这种方式，我设法获得了 filedset 的完整高度，从顶部到底部边界（没有底部溢出）， 将内容与图例 重叠。现在这可以通过 filedset 的填充 来解决（将内容从标签 and/or 中垂直居中，在字段集上使用 top/bottom 填充等）。

如果图例需要边框，可以使用绝对定位的伪元素（宽度 100%，高度 px/em/rem，顶部 50%，左侧：0，translateY -50% ), 因为图例上的填充（即使是负边距）也会带来同样的问题。

我在 Windows 8.1.

上的所有上述浏览器中进行了测试

我还没有在手机或 Safari 上测试过。我会在几个移动浏览器上测试它（android），但如果有人在 safari 上检查它，那就太好了。

如何以 % 的形式获取跨浏览器形式的 `fieldset` 内容高度（带图例）

How to get cross-browser form `fieldset` content height in % (with legend)

html

css

forms

cross-browser

fieldset