IEでブロック要素を強制的に折り返さないようにする（固定幅の親なし）

これはウェブ上で非常に議論されている問題ですが、数時間の研究と試行錯誤の末、私はまだ以下のHTMLをIE 7、8または9に希望：次のようにIEでブロック要素を強制的に折り返さないようにする（固定幅の親なし）

<html> 
    <head> 
     <title>Untitled Page</title> 
     <style> 
      .container { 
       white-space: nowrap; 
       overflow: auto; 
       position: absolute; 
      } 
      .childContainer { 
       float: left; 
      } 
      .box { 
       float: left; 
       border: 1px solid black; 
       width: 20px; 
       height: 20px; 

      } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="childContainer"> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
       <!-- repeat until off screen --> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
      </div> 
      <div class="childContainer"> 
       <span>This should not wrap!</span> 
      </div> 

     </div> 
    </body> 
</html>

希望の動作は以下のとおりです。

■は要素がラップしてはならない - スクロールバーはそれをウィンドウの下部に表示されます
.box要素は固定幅と高さを持つ必要があります
.containerと.childContainerは固定幅を持つことはできません。 ■は要素の数は
はIE7 +とChromeとFirefox

Chromeで提供されるHTML作品に合理的に一貫して動作する必要があり、私はそれがホワイトスペースを称える任意信じるれる：NOWRAP偶数ブロック用要素。私はSPAN要素を使用しようとしましたが、float：leftを持つブロック要素であることを余儀なくされたり、width属性が無視されたりする必要があります。 DIV要素と同じ問題があります。

JavaScriptを使用せずにこの問題を解決する必要があると確信していますが、他のすべてが失敗した場合はこれがオプションです。

出典

2012-02-03 Dale Anderson

'■は{ 境界：1ピクセル黒色固体。幅：20px; 身長：20px; } 'フロートを削除しようとしていますか：.boxクラスに残してください – Murtaza

http://jsfiddle.net/hjCWN/

私はIEでそれを試していないが、しかし、あなたはwhite-space: nowrap;を削除しようとすると、テーブルに箱を置きmargin-right: -99999px;

出典

2012-02-03 07:41:48 biziclop

うわー、なんてハック！はるかに複雑な実際のページレイアウトにそれをハックするために今、完全に動作します。感謝万円！ –

私はあなたの元の絶対/ nowrap /浮動小数点のトリックを理解したいと思います:) http://jsfiddle.net/hjCWN/3/ – biziclop

にそれを置き換えることができます。唯一の実用的なアプローチだと思われます。

あなたは.box要素が行に表示させるしようとすると、float: leftの使用は、それは別のレベルで動作するように言って、white-spaceを設定することで防ぐことができない、独自の効果を持っています。しかし、それらをテーブル行に入れることで、それらを強制的に行に入れます。

あなたもテーブルのそれらの要素だけスタイル細胞を分配することができる：

<style> 
table.boxes td { 
    border: 1px solid black; 
    width: 20px; 
    height: 20px; 
    padding: 0; 
} 
</style> 
... 
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>

出典

2012-02-03 07:44:34

IEでブロック要素を強制的に折り返さないようにする（固定幅の親なし）

答えて

関連する問題