1

いくつかのテキストを囲むボックスの美しい偽の凡例を作成しました：jsfiddle。ただし、私のソリューションでは、IE7およびIE8では機能しない疑似クラスを使用:beforeしています。:after

:beforeそこで、:after疑似クラスの代わりに使用する独自のスパンを定義することにしました。残念ながら、私の解決策は置き換えには機能するようですが、:before置き換えには機能しません:after：jsfiddle。また、なんらかの理由で箱の中身が上にずれています。

CSSとHTMLだけで私がしていることを達成することは可能ですか？JavascriptやjQueryを混ぜたくありません。

ありがとう！

4

1 に答える 1

1

http://www.webdevout.net/test?01&raw：

<！doctype html>
<html>
    <頭>
        <title> </ title>
        <スタイル>
html {
    オーバーフロー-y：スクロール;
    背景：＃ff3366;
    フォント：16pxセリフ;
}
フィールドセット{
    境界線：3px実線＃ffc2d1;
}
伝説 {
    背景：url（http://img820.imageshack.us/img820/4242/spritearrowdown.png）no-repeat 3px 50％;
    パディング：0 0 0 13px;
}
html> / ** / body
凡例{/*IE8での外観が本当に気になる場合：* /
    位置：相対;
    右：-13px;
}
        </ style>
    </ head>
    <本体>
        <form action = "foo">
            <フィールドセット>
                <legend>モデル予測ガイダンス</legend>
                フィールドセット
            </フィールドセット>
        </ form>
    </ body>
</ html>
于 2012-08-13T21:44:01.527 に答える