2

横線を3本並べたいです。IE7 のインライン ブロックに水平線を表示する方法を知っている人はいますか?

ここに私のCSSがあります:

hr.small {
    width: 28.9%;
    margin-right: 6px;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
    height: 3px;
    border: 0px;
    color: #7c8690;
    background-color: #7c8690;
}

しかし、それは機能しません。

ここにJSFiddleリンクがあります：http://jsfiddle.net/sRuz3/6/

誰かが解決策を持っている場合。

どうもありがとう。

4

3 に答える 3

2

どうぞ: http://jsfiddle.net/eq3Z2/

IE7でも動作します。

確かに、彼らは人事ではありません。それらは DIV です。HR をインライン要素としてレンダリングしようとすると、IE7 が機能しなくなりますが、回避策がわかりません。

于 2012-08-23T23:27:18.193 に答える
1

インラインブロックである必要はありますか？必要に応じて、単にそれらを浮かせて高さを設定することはできませんか?

編集 - 例:

hr.small {

    float:left;
    width: 28.9%;
    margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */
    height: 3px;
    background-color: #7c8690;

}

もう一度編集 - 質問:

これは流動的なレイアウトで行われますか? また、コンテナーの大きさはどれくらいですか? 動的な幅を設定していますが、マージンは固定されています。これにより、小さなスケールで問題が発生し、大きなスケールで右端に不要な空白が発生します。固定領域の場合は、固定幅の使用を検討してください。

于 2012-08-23T22:19:23.773 に答える
0

hrs を s でラップできれば解決策があるようですdiv。

div をdisplay:inline(span代わりに sを使用できますが、 hrs は s では無効ですspan)¹ に設定し、次の方法でdivs hasLayout を指定しますzoom:1

http://jsfiddle.net/YqKDJ/1/を参照してください

¹ 余談ですが、 shrが s で有効でない理由がありspan、ここで関連しています。Anhrは主に水平線を描く方法ではなく、「テーマの区切り」という特定のセマンティックな意味を持っています。間に内容のない2 つ以上のhr要素があることは意味がありません。プレゼンテーションの目的で複数の水平線が必要な場合は、@Cynthia の回答の行に沿って、CSS を使用してそれらを作成する必要があります。

于 2012-08-23T23:41:54.690 に答える