Question

我想设置% height div fieldset中包含的fieldset，但是当您使用legend 时，浏览器的计算方式与height: 100% 的内部高度相同！

Firefox：height: 100%考虑图例的高度：它没问题

Chrome：height: 100%不考虑图例的高度：它溢出。

Internet Explorer：<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>不考虑图例的高度：它溢出

1。您是否知道在3个浏览器中获得相同结果的干净解决方案？

2。哪个与W3C建议相比是正确的？

以下是用于进行测试的代码：

// jvmArgs make it so that we can run in forked mode without having to use the `--debug-fork` flag // and also has suspend=n so that it will start up without forcing you to connect a remote debugger first def jvmArgs = ['-Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005'] grails.project.fork = [ test: [maxMemory: 768, minMemory: 64, debug: false, maxPerm: 256, daemon:true, jvmArgs: jvmArgs], run: [maxMemory: 768, minMemory: 64, debug: false, maxPerm: 256, forkReserve:false, jvmArgs: jvmArgs], war: [maxMemory: 768, minMemory: 64, debug: false, maxPerm: 256, forkReserve:false, jvmArgs: jvmArgs], console: [maxMemory: 768, minMemory: 64, debug: false, maxPerm: 256, jvmArgs: jvmArgs] ]

Answer 1

这是一个有趣的案例关于你的第二个问题：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排除在外，则不允许对其进行一致的设置。

Answer 2

我对同样的问题感到疯狂，我找到了一个用于规范化字段集的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，通常我只阅读答案。那么原始和代码片段在https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6

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

Pd：对不起，如果我的英语不够好，但希望你能完全理解它

Answer 3

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

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

“浮动”或“位置：绝对；”不能解决我的问题，因为它删除了图例的透明背景。我想将其保留在fieldset的边框上，并同时保持其透明背景（以至于看不到其下方的边框）。

我尝试使用负的上/下边距，但是我在firefox中遇到了一个问题（实际上是唯一正确显示图例的人）。

我如何解决它：

我只是在图例上添加了“ 行高：0; ”（无单位），现在它可以正确显示它了。这样，我通过将内容与图例重叠，从上到下边框（没有下溢）获得了文件集的完整高度。现在，可以使用 filedset的填充（从标签上分离内容和/或使用字段集上的顶部/底部填充将其垂直居中等）解决此问题。

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

我在 Windows 8.1 上的所有上述浏览器中进行了测试。

我尚未在移动设备或野生动物园上对其进行测试。我将在几种移动浏览器（android）上对其进行测试，但是如果有人在safari上对其进行检查，那就太好了。

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

3 个答案: