6

次の HTML ページは、IE 8 と 9 以外のどのブラウザでも問題なく表示されるようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <div style="width: 300px">

        <span style="white-space: nowrap;">
            <input type="radio" value="1" name="test" />Choice 1
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="2" name="test" />Choice 2
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="3" name="test" />Choice 3
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="4" name="test" />Choice 4
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="5" name="test" />Choice 5
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="6" name="test" />Choice 6
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="7" name="test" />Choice 7
        </span>

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

html はかなり単純に見えますが、IE 8 & 9 は div の幅を無視し、すべての選択肢を同じ行に強制します (IE 7 およびその他のすべての非 IE ブラウザは、必要に応じて 300px で折り返されます)。どういうわけか、ラジオを対応する選択肢から分離せずに、このラジオボタンリストを指定された幅で折り返す必要があります。

Doctype を変更すれば IE 8 & 9 を動作させることができますが、可能であればそれを変更したくありません。

span タグの代わりに昔ながらの「nobr」タグを使用すると、同じ動作が得られます。

4

2 に答える 2

3

;" "を入れる必要があります<div style="width: 300px;">(グッドプラクティス)

使用しdisplay: inline-blockます。それ以外のwhite-space: nowrap;

于 2012-06-07T17:16:00.580 に答える
3

問題は、マークアップにあるタブと改行にあります。これらをラップしないように IE に要求していますが、同時に、各要素を親コンテナーに並べて配置するのに十分な幅を維持するように要求しています。

空白を削除すると、すべてのブラウザーがマークアップを同じようにレンダリングすることに注意してください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
        width: 300px; 
        border: 1px solid #333
      }
      span { 
        border: 1px solid red; 
        white-space: nowrap
      }
    </style>
  </head>
  <body>
    <div>
      <span><input type="radio" value="1" name="test" /> Choice 1</span>
      <span><input type="radio" value="2" name="test" /> Choice 2</span>
      <span><input type="radio" value="3" name="test" /> Choice 3</span>
      <span><input type="radio" value="4" name="test" /> Choice 4</span>
      <span><input type="radio" value="5" name="test" /> Choice 5</span>
      <span><input type="radio" value="6" name="test" /> Choice 6</span>
      <span><input type="radio" value="7" name="test" /> Choice 7</span>
    </div>
  </body>
</html>

ここに画像の説明を入力

于 2012-06-07T17:59:08.677 に答える