IE 忽略空白时的填充：nowrap答案

【问题标题】：IE ignores padding when white-space: nowrapIE 忽略空白时的填充：nowrap
【发布时间】：2011-03-21 21:04:53
【问题描述】：

好的，所以我有一个背景位于左侧的跨度，以及一个 20 像素的 padding-left 以防止文本在图像顶部呈现...非常标准。

我还在 span 上设置了 white-space:nowrap 来阻止换行。

跨度位于大约 200 像素宽的 div 中。如果跨度中的文本足够长以超过包含 div 的长度，则填充开始被忽略并且文本呈现在 bg 图像的顶部。如果我离开空白：正常，这将停止发生。包含的 div 也有溢出：自动设置（正在渲染滚动条）。

使用 IE8 ...这是众所周知的事情吗？有没有标准的修复方法，我找不到任何东西:(

【问题讨论】：

【解决方案1】：

您可能需要发布更多代码，但据我所知，您的 html 看起来像这样

<div class="container"><span class="text">Text asdf asdf</span></div>

你的 CSS 看起来像这样

.container
{
   overflow:auto;
   width:200px;
}
.text
{
   background:...
   white-space:nowrap;
   padding-left:20px;
}

在这个简单的模型中，您的填充将消失，因为跨度是内联显示的，并且会在右侧空间不足时停止正确应用填充。为了正确地让您的跨度遵循填充规则。您将需要更改为display:block，如果您希望它与 div 中的其他项目一起流动而不是它自己的行，这将迫使您进行其他更改。

【讨论】：

真正的浏览器不会停止显示填充，div 只是获得更多的溢出来容纳元素。还将 .text 设置为 display:block 无效。不过感谢您的帖子，我意识到我对代码细节很了解，但是将所有内容都作为示例发布是不切实际的。