1

次のdivがあります

<body>
<span style="border:1px solid red; display:inline-block">
    Some text<br />
    <hr />
    some more text
</span>
</body>

「通常の」Web ブラウザでは、div の幅はテキストに合わせて計算されます。そして、これhrは div の 100% です。 ここに画像の説明を入力

しかし、IE7 ではhr、div が本体の 100% に拡大されます。 ここに画像の説明を入力

IE7 で正しく動作するように、どこかに追加する必要がある賢い css はありますか?

固定幅を設定できないことに注意してください。

4

3 に答える 3

1

IE6/7 では、display:inline-blockデフォルトでインラインになっている要素 (スパンなど) でのみ機能します。したがって、div をdisplay:inline-blockに設定しようとすると、IE6/7 では機能しません。

インライン要素は、そのコンテンツの幅に合わせてサイズ変更されます。明示的な幅が指定されていない場合、インライン ブロック要素はデフォルトで同じことを行います。hr が 100% (親の 100%、つまり子の 100%) の場合、hr 幅の循環定義があり、期待どおりに機能しない可能性があります (何の 100%? それ自体の 100%)。 .

一部のブラウザー (特に IE6/7) で期待どおりに機能しない可能性がある幅の循環定義を回避するには、hr のコンテナー (div、span など) に定義された幅 (px、%、またはem) または hr 自体に明示的な幅 (px または em) が必要です。それ以外の場合、幅は識別可能な方法で定義されておらず、デフォルトで何を行うかを決定するのはブラウザーに任されています。

幅を設定できない場合は、hrタグの使用が除外される可能性があります。また、私が実行したテストに基づいて、オプションは CSS ソリューションにもあまり適していないようです (幅を設定しない場合)。

編集：

幅を設定したり、JavaScript や jQuery に依存したりせずにこれを行う唯一の方法は、テキストの各行の後に水平線を入れることが許容されるかどうか (存在する場合は、次の行に折り返される長い段落を含む) だと思います。 . その場合、行が上部に表示されないように、テキストの行の高さに等しい増分で水平線を含むコンテナーに bg 画像を追加し、行の高さに等しい垂直オフセットで表示することができます。テキストの最初の行の。

HTML

<div class="main">
    <p>This is the first line.<br/>
       This is the second line.<br/>
       This is a long line that will wrap around to the next line if the container is not very wide.
    </p>
</div>

CSS

.main {
    background: url(image.png) repeat-x left 15px;
}
p {
    font-size: 12px;
    line-height: 15px;
}

jsfiddle デモ

于 2012-06-28T15:56:02.507 に答える
0

タグのwidthプロパティは<hr>非推奨になったため、スタイル オプションは<hr>タグで制限されています。

より現代的なアプローチは、代わりborderに a のプロパティを使用することです。<div>

IE 7 でレンダリングされた画像:

ここに画像の説明を入力

Chrome 19 でレンダリングされた画像:

ここに画像の説明を入力

HTML

<body>
  <div style="border:1px solid red; float:left;">
    <p>
      Some text
    </p>
    <p class="border-top">
      some more text
    </p>
  </div>
</body>​​​

CSS

​.border-top{
  border-top:#000 1px solid;
  padding-top:1em;
}​

注: IE 6 および 7 は をサポートしていないため、代わりdisplay:inline-blockに使用する必要がある場合があります。float:left以下の記事では、前述のプロパティの使用を比較しています。

于 2012-06-28T16:03:22.070 に答える
0

ブログで方法を見つけました。元のものが必要ですmodernizer.js。私はそれを編集しました。

HTML: <div class="hrdemo"><hr /></div>

CSS: .hrdemo hr { display:none }

ただし、div.hrdemo浮遊コンテナの中にいる場合は、固定幅を割り当てる必要がある場合があります (IE7 の場合)。

于 2012-06-28T16:00:03.663 に答える