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 换行）。不知何故，我需要这个单选按钮列表以指定的宽度换行，同时不将单选按钮与相应的选项分开。

如果我更改文档类型，我可以让 IE 8 和 9 正常运行，但是如果可能的话，我想避免更改它。

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

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 回答