IE发布最小页边距-字段集中的顶部图例

Question

在IE的fieldsets中遇到了一些问题，就像你在图片中看到的，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

编辑: Google chrome也有同样的问题

Answer 1

众所周知，字段集和图例很难在不同的浏览器上以相同的方式设置样式。你真的应该按照他们的限制去设计，而不是按照你想要的去设计。话虽如此..。如果您仍然顽固，并且想要做错误的事情，那么您应该在您设置样式的legend中放置一个元素。像这样的东西(see Fiddle)可以在Chrome和IE上运行(注意:它将而不是在火狐上看起来正确)。

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

有几件事需要注意。

1. 通过绝对定位图例，您可以欺骗浏览器在整个字段集顶部设置边框样式。如果不这样做，在字段集所在的位置将会有一个小差距。
2. 你对浏览器如何设置样式做了大量的假设，这些假设可能是正确的，也可能是错误的。

Answer 2

添加

.fieldset{display: block;

对我很管用