Question

以下html页面似乎在任何浏览器中都可以正常呈现，但IE 8＆amp; 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＆amp; 9忽略div上的宽度并强制在同一行上的所有选择（IE 7和所有其他非IE浏览器以300px的速度换行）。不知怎的，我需要这个单选按钮列表以指定的宽度换行而不将无线电与相应的选项分开。

我可以获得IE 8＆amp;如果我改变了doctype，我会表现得很好，但是如果可能的话，我想避免改变它。

如果我使用旧式“nobr”标签代替span标签，我会得到相同的行为。

Answer 1

你应该在;（良好做法）中加入“<div style="width: 300px;">”

使用display: inline-block;而不是white-space: nowrap;

Answer 2

问题在于标记中的标签和换行符。你要求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>

enter image description here

IE 8＆amp; 9忽略div宽度 - 如何使这个例子起作用？

2 个答案: