Fatal编程技术网
  • css/
  • Css IE 8&；9忽略div width-如何让这个示例工作？

Css IE 8&；9忽略div width-如何让这个示例工作？

css internet-explorer internet-explorer-8

Css IE 8&；9忽略div width-如何让这个示例工作？,css,internet-explorer,internet-explorer-8,internet-explorer-9,doctype,Css,Internet Explorer,Internet Explorer 8,Internet Explorer 9,Doctype,除IE 8和9外，以下html页面在任何浏览器中都显示良好： <!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">

除IE 8和9外，以下html页面在任何浏览器中都显示良好：

<!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>


选择1
选择2
选择3
选择4
选择5
选择6
选择7
html看起来相当直截了当，但IE8和IE9忽略了div上的宽度，并强制所有选项都在同一行上（IE7和所有其他非IE浏览器都以300px的速度包装）。不知何故，我需要这个单选按钮列表以指定的宽度换行，同时不将单选按钮与相应的选项分开

如果我更改doctype，我可以让IE8&9正常工作，但是如果可能的话，我希望避免更改它

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

您应该在
中添加“
”（良好实践）


使用
显示：内联块
；而不是
空白：nowrap
问题在于标记中的选项卡和换行符。你要求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>




div{
宽度：300px；
边框：1px实心#333
}
span{
边框：1px纯红；
空白：nowrap
}
选择1
选择2
选择3
选择4
选择5
选择6
选择7



添加
显示：内联块样式到您的div帮助中？您始终可以添加float:left；明确：两者皆有；到最后一个
在样式声明和CSS块中是可选的。感谢您的快速响应。“显示：内联块”成功了。但是，在内联样式的结尾不需要分号，但这样做可能更简洁。@Mayankswami您应该更新第一条语句。IE 8和9在没有结束分号的情况下忽略内联样式声明，这不是真的。谢谢您的回复。然而，问题不是如何让IE正确地呈现它，问题是如何让IE使用原始文章中的doctype正确地呈现它，这是您的示例所没有的。Mayank建议的“display:inline block”既适用于您的doctype，也适用于原始doctype。@TroyEvans：当我使用您的doctype
测试Jonathan发布的Html时，它在IE中仍然有效。演示请参见此处：@TroyEvans更改doctype；它在IE中仍然有效。您对IE的说明不一致-doctype在这里是不相关的。+1非常好地解释了
nowrap
在IE中的工作方式，并演示了代码格式是如何影响这一点的。@TroyEvans删除doctype会使您的文档进入怪癖模式，任何事情都会发生。不要去那里，那是一个无法无天和反叛的地方。没有人能在邪恶的街道上生存。罪犯和精神病患者在每个角落都在等待——你的孩子不安全