填充字段集，IE 出现问题

发布于 2024-10-31 21:18:44 字数 733 浏览 1 评论 0原文

渲染字段集的填充时发生了什么。它在 FF 和 Chrome 中的行为符合预期，但在 IE 中失败。这是我正在谈论的代码：

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

这是 css

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

也可以在这里看到： http://jsfiddle.net/nRAGM/6/

所以我的问题是：如何获得上述内容html 在 IE 中按预期显示？

原文

What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

And this is the css

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

Can also be seen here:
http://jsfiddle.net/nRAGM/6/

So my question is: how to get the above html to display as intended in IE?

分享到QQ

分享到微博

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

发布评论

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

享受孤独 2024-11-07 21:18:44

以下代码是跨浏览器兼容的。

您可以独立控制字段集图例的缩进。在填充字段集时，您还缩进图例。虽然这在某些情况下可能是所需的效果，但以下方法提供了更大的灵活性。另外，向内部 div 添加边距可以让您更好地控制布局（因为向容器添加内边距可能会增加不需要的宽度）。

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}

The following code is cross-browser compatible.

You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}

回复收藏 0 原文

趁微风不噪 2024-11-07 21:18:44

将 display:block 添加到字段集样式应该可以解决您的问题。这对我有用！试用。

回复收藏 0 原文

递刀给你 2024-11-07 21:18:44

或真正顽皮的黑客（或将其放入条件 [lte IE 8] CSS 中）版本。

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

将 label 的底部边距设置为与 fieldset 的顶部填充相同也可以实现这一点。显然没有其他浏览器应该同时获得这两个

PS：我认为这也适用于 IE6

or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both

PS: I think this works for IE6 too

回复收藏 0 原文

~没有更多了~