IE 8 & 9 忽略 div 宽度 - 如何让这个例子工作？
Posted
技术标签:
【中文标题】IE 8 & 9 忽略 div 宽度 - 如何让这个例子工作？【英文标题】：IE 8 & 9 ignoring div width - how to get this example to work? 【发布时间】：2012-06-11 18:58:29 【问题描述】：以下 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 标签，我会得到相同的行为。
【问题讨论】：
在您的 div 中添加display: inline-block; 样式有帮助吗？
你可以随时添加 float:left;clear:both;到跨度
【参考方案1】：
你应该把“;”放在<div style="width: 300px;">中（好习惯）
使用display: inline-block;而不是white-space: nowrap;
【讨论】：
样式声明和 CSS 块中的最后一个; 是可选的。
感谢您的快速回复。 “显示：内联块”成功了。但是，内联样式的末尾不应该需要分号，但无论如何这样做可能更简洁。
@Mayankswami 您应该更新您的第一条语句。 IE 8 和 9 在没有结束分号的情况下忽略内联样式声明是不正确的。【参考方案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>
【讨论】：
感谢您的回复。但是，问题不是如何让 IE 正确呈现它，问题是如何让 IE 正确呈现它使用原始帖子中的文档类型，而您的示例没有。 Mayank 建议的“display: inline-block”适用于您的 doctype 和原始 doctype。 @TroyEvans：当我测试 Jonathan 发布的 Html 使用您的 DocType<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 时，它仍然在 IE 中工作。在这里查看演示：jsfiddle.net/FranWahl/eHwm5/3
@TroyEvans 更改文档类型；它仍然可以在 IE 中使用。您对 IE 的指示不一致 - 此处的文档类型无关紧要。
+1 很好地解释了 nowrap 在 IE 中的工作原理，并演示了代码格式如何影响这一点。
@TroyEvans 删除 doctype 会使您的文档进入 Quirks 模式，任何事情都会发生。不要去那里，那里是无法无天和叛逆的地方。没有人能在邪恶的街道上幸存下来。罪犯和精神病患者在每个角落等待——你的孩子不安全。 ;)以上是关于IE 8 & 9 忽略 div 宽度 - 如何让这个例子工作？的主要内容，如果未能解决你的问题，请参考以下文章
HTML1115：X-UA 兼容 META 标记（'IE=9，IE=8，chrome=1'）被忽略，因为文档模式已经完成