如果不使用<fieldset>标签，是否有可能实现<fieldset>效果？
我个人喜欢<fieldset>标签，因为它是如何绘制一个框，并将<legend>放在它的顶部，越过边界。 喜欢这个。
然而， fieldset元素是用来组织表单的 ，使用它来进行一般的devise并不比使用表格来进行一般的devise。 所以，我的问题是… 如何使用另一个标签实现相同的结果？ 在<legend> （或任何其他标签将被使用）之下，边框必须被擦除，并且由于可能存在“复杂的”正文背景图像，所以我不能将图例的background-color设置为匹配下的元素之一。
我希望它能够在没有JavaScript的情况下工作，但是CSS3和基于XML的格式（如SVG或XHTML）都可以。
不，这是不可能的。 即使浏览器制造商本身也在为此而苦苦挣扎。
当然，我无法抗拒。 而且我花了这么多时间， Anonymous在同时提出了一个类似于我的“解决scheme”（他的test1 ）。 但是我不需要固定宽度的“传说”。
但是，这个代码显然有些黑客，我不知道它在复杂的网站上有多好。 我也同意Anonymous的说法，使用fieldset来进行分组并不像使用表格那样糟糕。 字段集是为分组元素而devise的，尽pipe在HTML中它们实际上只能用于分组表单控件。
.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; }
<fieldset> <legend>Legend</legend> Fieldset </fieldset> <div class="fieldset"> <h1><span>Legend</span></h1> Fieldset </div>
演示jsBin链接
.fieldset { border: 1px solid #ddd; margin-top: 1em; width: 500px; } .fieldset h1 { font-size: 12px; text-align: center; } .fieldset h1 span { display: inline; border: 1px solid #ddd; background: #fff; padding: 5px 10px; position: relative; top: -1.3em; }
<div class="fieldset"> <h1><span>Title</span></h1> <p>Content</p> </div>
然而，它是用来组织表格的，用它来进行一般的devise并不比使用表格来进行一般的devise
这是错误的。 使用表格布局的主要问题是几乎没有布局映射到表格数据。 第二个问题是那些没有映射到表格数据的是表格数据，而那些没有的是表格数据。 也就是说，标记的语义不符合页面的语义。 另外，实际上，表格布局机制通常会使自定义样式和文本浏览变得痛苦或不可能。
现在，fieldset显然有分组表单的意图。 select一个元素的外观几乎总是一个标志，这是一个不好的select。 然而，对于这个具体的例子，我认为包含列表的字段集+图例几乎没有任何缺点（实际上，我能想到的唯一的一个就是一个廉价的，它天真地将fieldset解释为信号forms，然后浪费用户的时间列举其内容不同;但我什么也不知道）。 其主要原因在于，forms要素包含了input的function和语义目的，而早期的字段具有特殊的，不可再现的视觉效果。 另外，如果字段集中的可视元素以任何方式起作用，则在语义上字段集会再次包含一组交互式小部件，这是原始点。
我的build议是使用它，如果你想。 我不会，但不是因为语义上的考虑：我宁愿不依赖于特殊效果，而是总体上避开forms而不是function。
无论如何，这是一些咀嚼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>test</title><style type="text/css"> .fake_fieldset { border: 2px groove ButtonFace; border-top-width: 0; margin-left: 2px; margin-right: 2px; padding: .35em .625em .75em; margin-top: 1em; position: relative; } .fake_legend { margin-top: -1em; } .fake_legend.test1::before { position: absolute; top: 0; left: -1px; border-top: 2px groove ButtonFace; content: " "; width: 0.5em; } .fake_legend.test1::after { position: absolute; top: 0; right: -1px; border-top: 2px groove ButtonFace; content: " "; width: 80%; } .fake_fieldset.test2 { padding: 0; padding-top: 1px; /* no collapsed margin */ } .fake_fieldset.test2 .fake_fieldset.container { margin: 0; border: 0; } .fake_legend.test2 { display: table; width: 100%; } .fake_legend.test2 span { display: table-cell; } .fake_legend.test2 span:first-child { width: 0.5em; } .fake_legend.test2 span:first-child + span { width: 0; /* cells stretch */ } .fake_legend.test2 span:first-child, .fake_legend.test2 span:last-child { /* the rest of this code is left as an exercise for the reader */ } </style></head><body> <fieldset><legend>foo</legend>bar</fieldset> <div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div> <div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div> </body></html>
我相信你已经知道了答案。
你有2个选项，提供你自己的边框（这是很多不必要的工作）或定位一个元素与occludes的边界（问题是，你只能有一个坚实的背景颜色，但也许这很好）。
据我所知，没有什么可以做的，就是在每个浏览器里都能很好地完成这项训练。 我喜欢你的风格，这是正确的方法，但可能不是一个问题，你将能够以令人满意的方式解决。
我对这些话题的一般看法是，你不应该尝试在networking上做事情，这需要A）过度的努力，或B）一开始并不完全明显的标记解决scheme。 networking有一定的局限性，你可以做好自己的工作，而不是试图解决这些限制。
所以我不得不问，<legend />有什么问题？
我得到了一个合理的结果。
<div> <div style='position:absolute;float:top;background-image: url("whiteSquare.jpg");height:20px;z-index:10;font-size:20px'> Header </div> <div style='position:absolute;float:top;border:1px dashed gray;width:300px;margin-top:12px;z-index:1'> <div style='margin-top:20px;'> <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>A</td> <td>B</td> </tr> </table> </div> </div> </div>
我更新一点匿名的提议：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>test</title><style type="text/css"> .fake_fieldset { border: 2px groove ButtonFace; border-top-width: 0; margin-left: 2px; margin-right: 2px; padding: .35em .625em .75em; margin-top: 1em; position: relative; } .fake_legend { margin-top: -1em; } .fake_legend.test1::before { position: absolute; top: 0; left: -1px; border-top: 2px groove ButtonFace; content: " "; width: 0.5em; } .fake_legend.test1::after { position: absolute; top: 0; right: -1px; border-top: 2px groove ButtonFace; content: " "; width: 80%; } .fake_legend.test1 div { z-index: 100; background: white; position: relative; float: left; } .fake_fieldset.test2 { padding: 0; padding-top: 1px; /* no collapsed margin */ } .fake_fieldset.test2 .fake_fieldset.container { margin: 0; border: 0; } .fake_legend.test2 { display: table; width: 100%; } .fake_legend.test2 span { display: table-cell; } .fake_legend.test2 span:first-child { width: 0.5em; } .fake_legend.test2 span:first-child + span { width: 0; /* cells stretch */ } .fake_legend.test2 span:first-child, .fake_legend.test2 span:last-child { /* the rest of this code is left as an exercise for the reader */ } </style></head><body> <fieldset><legend>foo</legend>bar</fieldset> <div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div> <div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div> </body></html>
