Question

对于fieldsets有一些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

编辑：Google Chrome有同样的问题

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

有几点需要注意......

通过将图例绝对定位，您可以欺骗浏览器在字段集的整个顶部设置边框样式。如果没有这样做，那么字段集就会有一点间隙。
你有很多关于浏览器如何设计这种风格的假设，可能是也可能不对。

Answer 2

添加

.fieldset{display: block;

适合我

IE在Fieldset中发布min margin-top Legends

2 个答案: