IE9 空白 css 和对齐

Posted 2023-03-05

【中文标题】IE9 空白 css 和对齐

【英文标题】：IE9 whitespace css and alignment

【发布时间】：2012-09-26 16:25:14

【问题描述】：

我遇到的问题是我需要在 TD 文本上保留空白，同时仍然垂直对齐 TD 内的文本。启用white-space: pre-wrap 时，文本在TD 内底部对齐。如果我禁用该标签，那么 IE 会在每个字母之间去掉一个空格。

<td  class="someClass" style="white-space: pre-wrap;">    
    hh    ee  lll oooo
</td>

这是它的 CSS

.someClass 
  text-align: left;
  text-indent: 0px;
  padding-top: 1px;
  padding-bottom: 2px;
  font-size: 1em;

【问题讨论】：

如果你用pre标签包裹你的文字，你的间距应该被保留

【参考方案1】：

如果您将文本包装在 pre 标记中，则应保留间距

<td  class="someClass" style="white-space: pre-wrap;">    
    <pre>hh    ee  lll oooo</pre>
</td>​

小提琴：http://jsfiddle.net/BLSully/hb4aU/2/

【讨论】：

这似乎夸大了空间的大小，而不是在 CSS 中使用预包装。它们都有相同数量的空格，但

那是因为pre 默认使用单空格字体。在您的 CSS 中，您可以执行类似 td pre font-family: inherit;

的操作