インラインの親の中のインライン要素と混在したときに、HTML要素の一部が「ブロック」として動作するようにする

Question

表示プロパティをインラインに設定しようとしています（または余白が必要な場合はインラインブロック） IEで正しく（ほとんどの場合はそうです）。 私の状況はこれです - アイテムコンテナが水平に配置されたインラインアイテムを含むワークスペースを想像してください。これらのアイテムは、テキストやイメージのようなものを保持することができますが、分子や分母自体がアイテムコンテナで、より水平なアイテムを含む '分数'などの複合型にもなります。増加し、それらがネストされたコンテンツを含む可能性があるため、私はアイテムまたはアイテムコンテナの固定幅または高さを望んでいない、明らかに

<div class='item-container'> 
    <div id='statictext' class='item'>x = </div> 

    <div id='fraction' class='item'> 
     <div id='numerator' class='item-container'>...</div> 
     <hr/> 
     <div id='denominator' class='item-container'>...</div> 
    </div> 
</div> 

：

したがって、たとえば、私はHTMLを持っているかもしれません（例えば、別の小数部の中の小数部を想像するなど）必要なスペースの量と同様に、静的なテキスト 'item'の幅を1行のテキスト、つまりインラインを含むのに十分な大きさにしたい場合。

インラインの 'item'/'item-container'要素内にブロック要素を入れないことは難しいと思います。例えば、小数部の<hr>などです。アイテムの内容の残りの幅が計算された後に全幅を使用する 'アイテム'の割合 ブロック要素の表示属性をinlineまたはinline-blockに設定すると、実際のブロック項目をインライン1行に入れるのは無効な構文であることが分かりますが、少なくともFirefox/Chromeでは正しく動作します。しかし、悲しいかな、IEではなく。

適切な修正はありますか？

EDIT：私は実際にFirefoxなどで動作するように 'item'と 'item-container'をインラインブロック（適切なIEのハックあり）で使用しましたが、それでもIEはインラインその子の1つがブロックなので、ブロックに変換されます。

Answer 1

<hr>を使用しないでください。 text-decoration: underlineを使用して線を描画するか、下の枠線を使用するか、画像を使用して1つの線を描くことができます（たとえば、1ピクセルの画像を希望の幅に伸ばします）。次に、インライン要素を扱うことができます。