可以实现< fieldset>类似的效果，而不使用< fieldset>标签？ [英] Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag?
问题描述
我个人喜欢，并且将其用于一般设计不如使用表格进行一般设计。所以，我的问题是... 如何使用另一个标签实现相同的结果？边框必须在< legend> （或任何其他标签将使用），并且由于可能有一个复杂的身体背景图像，我不能只设置 background-color
我希望它可以在没有JavaScript的情况下工作，但是CSS3和基于XML的格式（如SVG或XHTML）很好。
不，这是不可能的。 即使浏览器制造商本身也在努力。
当然，我不能拒绝去。我花了这么多时间，匿名提出了一个解决方案，与我的平均时间（他的 test1 ）。但我的不需要固定宽度的传奇。
这段代码显然是一个黑客，但我不知道它是多么好，在复杂的网站。我也同意匿名说，使用字段集进行分组并不像使用表格布局那么糟糕。 Fieldsets 用于分组元素，虽然在HTML中，它们只是用于分组表单控件。
code><！doctype html>
< style>
.fieldset {
border：2px groove threedface;
border-top：none;
padding：0.5em;
margin：1em 2px;
}
.fieldset> h1 {
font：1em normal;
margin：-1em -0.5em 0;
}
.fieldset> h1> span {
float：left;
}
.fieldset> h1：before {
border-top：2px groove threedface;
content：'';
float：left;
margin：0.5em 2px 0 -1px;
width：0.75em;
}
.fieldset> h1：{
border-top：2px groove threedface;
content：'';
display：block;
height：1.5em;
left：2px;
margin：0 1px 0 0;
overflow：hidden;
position：relative;
top：0.5em;
}
< / style>
< fieldset>< legend>图例< / legend>字段集< / fieldset>
< div class =fieldset>< h1>< span>图例< / span>< / h1&字段集< / div>
注意，您可能还需要查看HTML5 figure code> 和 figcaption 元素。这些似乎是在你的例子中使用的最好的元素。
这只是为了问题的语义部分，但是，因为我不认为这些元素与字段集/图例相同。更何况，目前的浏览器可能不支持这些元素。
I personally like the <fieldset> tag because of how it draws a box and puts the <legend> at the top of it, over the border. Like this.
However, the fieldset element was made to organize forms, and using it for general design is no better than using tables for general design. So, my question is... how can I achieve the same result using another tag? The border has to be erased under the <legend> (or whatever other tag will be used), and since there could be a "complex" body background image, I can't afford to just set the background-color of the legend to match the one of the element under.
I'd like it to work without JavaScript, but CSS3 and XML-based formats (such as SVG or XHTML) are fine.
No, it isn't really possible. Even browser makers themselves are struggling with that.
Of course, I couldn't resist having a go at it anyway. And I spent so much time on that, that Anonymous came up with a "solution" rather similar to mine in the mean time (his test1). But mine doesn't need the fixed width "legend".
This code is evidently a bit of a hack, though, and I don't know how well it'll fare in complex sites. I also agree with Anonymous that using a fieldset for grouping isn't nearly as bad as using tables for layout. Fieldsets were designed for grouping elements, though in HTML they're really only supposed to be used for grouping form controls.
<!doctype html>
<style>
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset > h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset > h1 > span {
float: left;
}
.fieldset > h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset > h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}
</style>
<fieldset><legend>Legend</legend> Fieldset</fieldset>
<div class="fieldset"><h1><span>Legend</span></h1> Fieldset</div>
As a side note, you might also want to have a look at the HTML5 figure and figcaption elements. Those seem to be the best elements to use in your example.
That's only for the semantic part of the issue, though, since I don't think those elements are rendered the same as a fieldset/legend. Not to mention that current browsers probably don't support these elements yet to begin with.
这篇关于可以实现< fieldset>类似的效果，而不使用< fieldset>标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
