IE 在 Fieldset 中发出最小边距顶部图例

发布于 2024-12-21 08:06:26 字数 522 浏览 1 评论 0原文

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

图片： https://i.sstatic.net/oVhb2.png

编辑：Google chrome 有同样的问题

原文

Got some IE issue with fieldsets, as you can see in the image is that IE even IE9 doesn't get the margin-top: -26px; Someone how knows the fix?

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

image: https://i.sstatic.net/oVhb2.png

edit: Google chrome has the same issue

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人海汹涌 2024-12-28 08:06:26

众所周知，字段集和图例很难在不同的浏览器中以相同的方式设置样式。你真的应该根据他们的局限性来设计，而不是根据你想要的设计。话虽如此...如果您仍然固执并想要做错误的事情，您应该在您想要的图例中放置一个元素风格。像这样的东西（参见 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;
}

有几点需要注意...

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

Fieldsets and legends are notoriously hard to style the same way across different browsers. You should really style to their limitations and not style to what you want. With that said... if you're still stubborn and want to do the wrong thing you should put an element within the legend that you style. Something like this (see Fiddle) will work for Chrome and IE (Note: it will not look right for 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;
}

A couple things to note...

By positioning the legend absolute, you trick the browser into styling the border on the entire top of the fieldset. If this wasn't done there would be a little gap where the fieldset is.
You're makign a ton of assumptions about how the browser will style this that may or may not be right.

回复收藏 0 原文