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

この CSS をlegend要素に使用します。

legend { margin-left: -9999px; }
于 2012-08-17T18:32:25.393 に答える
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

HTML を変更したくない、または変更できず、凡例テキストを表示する必要がない場合は、表示をオフにすることができます。

legend { display: none; }

HTML を制御できる場合は、@ user1289347 のソリューションが機能しますが、ラッパー要素を追加する必要があります。

于 2012-08-17T18:33:16.497 に答える