如果不使用<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>