我似乎无法获得< legend>的背景元素是透明的。请参阅此jsFiddle:http://jsfiddle.net/hWZa6/(在Chrome和Firefox中测试)
我想要实现的效果实际上是移动< legend>包含< frameset>的顶部边框下方的元素元素,但我没有做任何事情使顶部边框完整。无论我是尝试使用透明度还是位置,它总是会忽略图例所在线的位置: http://cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg
如何制作传说中的边框区域,完成?
答案 0 :(得分:1)
您可以将其放在屏幕上,
position:absolute; left:-999em;
或者您最喜欢的与屏幕阅读器兼容的偏移技术。 (也许研究样板的图像替换样式)
答案 1 :(得分:1)
您可以将position:absolute
添加到legend
。 (可选)将position:relative
添加到fieldset
,以便您可以移动。
答案 2 :(得分:1)
试试这个,只需隐藏fieldset边框并将元素包装在带边框的div中。 http://jsfiddle.net/hWZa6/15/
<div id="wrapper">
<fieldset>
<legend>Test</legend>
The top border is never fully visible, despite the legend being set <code>visibility: hidden</code>.
<div id="A">
<div id="B">Upon applying <code>visibility: hidden</code> this div becomes transparent, and the red div behind it is fully visible.</div>
</div>
</fieldset>
</div>
fieldset { border: none; }
#wrapper { border: 1px solid black; }
legend { display: block }
#A { background-color: red; width: 300px; height: 150px; padding: 10px;}
#B { background-color: blue; width: 400px; height: 100px;}
答案 3 :(得分:1)
将此CSS用于legend
元素。
legend { margin-left: -9999px; }
答案 4 :(得分:-1)
如果您不想,或无法更改HTML,并且您不需要显示图例文字,则可以关闭显示。
legend { display: none; }
如果您确实可以控制HTML,那么@ user1289347的解决方案可行,但需要添加包装元素。