IE issue min margin-top Legends within a Fieldset答案

【问题标题】：IE issue min margin-top Legends within a FieldsetIE issue min margin-top Legends within a Fieldset
【发布时间】：2011-12-16 11:06:30
【问题描述】：

在字段集方面遇到了一些 IE 问题，如图所示，IE 甚至 IE9 都无法获得 margin-top: -26px; 有人怎么知道修复？

fieldset{
  border: 1px solid #CCC;
  border-top-color: #AAA;
  border-left-color: #AAA;
  background: #EEE;
  margin: 35px 0;
  padding: 10px;
}

legend {
  border: 1px solid #AAAAAA;
  border-bottom: none;
  padding: 5px 10px;
  margin-left: -11px;
  margin-top: -26px;
}

图片：http://i.stack.imgur.com/oVhb2.png

编辑：谷歌浏览器也有同样的问题

【问题讨论】：

请人们停止使用负边距：|从规范：Negative values for margin properties are allowed, but there may be implementation-specific limits. 所以我总是建议不要使用它。负边距听起来也不合逻辑

标签： css internet-explorer legend fieldset

【解决方案1】：

众所周知，字段集和图例很难在不同的浏览器中以相同的方式设置样式。你真的应该根据他们的限制设计风格，而不是你想要的风格。话虽如此...如果您仍然固执并想要做错事，您应该在您设置的legend 中添加一个元素。像这样的东西 (see Fiddle) 适用于 Chrome 和 IE（注意：它不看起来适合 Firefox）。

fieldset{
    border: 1px solid #CCC;
    border-top-color: #AAA;
    border-left-color: #AAA;
    background: #EEE;
    margin: 35px 10px;
    padding: 10px;
    position:relative;
}
legend {
    position:absolute;
    top:0;
}
legend span {
    border: 1px solid #AAA;
    border-bottom: none;
    padding: 5px 10px;
    position:absolute;
    left: -11px;
    top: -30px;
}

需要注意的几件事...

通过定位绝对图例，您可以欺骗浏览器在字段集的整个顶部设置边框样式。如果不这样做，那么字段集所在的位置就会有一点差距。
您对浏览器将如何设置此样式做出了大量假设，这些假设可能正确，也可能不正确。

【讨论】：

我认为这里的诀窍是 fieldset 规则包括 position:relative - IE 需要在图例的父容器上明确规则才能使负边距或负位置正常工作。跨度>
谢谢，'span 成功了。但我确实改变了我的系统的构建。我没有考虑字段集的目的。所以我创建成div。

【解决方案2】：

添加

.fieldset{display: block;

为我工作

【讨论】：

在您的代码中，您使用.fieldset 类而不是fieldset 元素来设置元素的样式...而且您忘记了右括号}