0

我似乎无法让 <legend> 元素的背景透明。请参阅此 jsFiddle： http: //jsfiddle.net/hWZa6/（在 Chrome 和 Firefox 中测试）

我试图完成的效果实际上是将 <legend> 元素移动到包含 <frameset> 元素的顶部边框下方，但我没有做任何事情使顶部边框完整。无论我尝试使用透明度还是位置，它总是缺少图例所在的行：http: //cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg

我怎样才能使传说中的边界区域完整？

4

5 回答 5

1

你可以把它放在屏幕外，

position:absolute; left:-999em;

或者您最喜欢的与屏幕阅读器等兼容的偏移技术。（也许调查样板的图像替换样式）

于 2012-08-17T18:16:40.987 回答
1

您可以添加position:absolute到legend. 可以选择添加position:relative到，fieldset以便您可以移动东西。

于 2012-08-17T18:19:32.770 回答
1

试试这个，只需隐藏字段集边框并将元素包装在带边框的 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;}​
于 2012-08-17T18:19:38.653 回答
1

将此 CSS 用于legend元素。

legend { margin-left: -9999px; }
于 2012-08-17T18:32:25.393 回答
-1

如果您不想或无法更改 HTML，并且不需要使图例文本可见，则可以关闭显示。

legend { display: none; }

如果您确实可以控制 HTML，那么@user1289347 的解决方案将起作用，尽管它需要添加包装器元素。

于 2012-08-17T18:33:16.497 回答