Question

我正在使用jQuery，HTML＆amp ;;制作一个“排序元素”网页游戏CSS。虽然在FF，IE8，Opera，Chrome中一切正常，但是我遇到了IE7在块元素中包装单词的问题。

以下是它在IE7中的外观（错误的）： Link (cannot post images as a new user)

在IE8中，带有包装文本的框只会展开以使其整齐排列在一行中而不会出现任何溢出。 抱歉，无法以新用户身份提供其他链接

不要介意元素顺序，因为它是随机的。元素由jQuery动态生成。

HTML code：

<div class="ui-sortable" id="area">
  <span class="object">: </span>
  <span class="object">1998- </span>
  <span class="object">ISSN 1392-4087</span>
  <span class="object">, </span>
  <span class="object">. </span>
  <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">Vilnius</span>
  <span class="object">1998- </span>
  <span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>

CSS代码（删除字体和颜色等无关信息）：

#area {
  min-height: 160px;
  width: 760px;
}
.object {
  display: block;
  float: left;
  text-align: center;
  width: auto;
}

有关IE7为什么这样做的任何评论？如何在IE7的一行中扩展这些跨度以适应整个文本而不包装文本或溢出？

Answer 1

我在IE7中尝试过自己，当你只是在span.object中添加'white-space：nowrap'时，它应该可以解决问题。浮动块元素工作得很好，所以不要改变它。

请参阅图片了解测试结果：http://xs.to/image-B3F6_4BDE909D.jpg

Answer 2

你有问题。浮子和自动宽度不会混合。当涉及宽度超过宽度的东西时，你也会遇到问题。

为什么不把它留在内联？如果您需要一个方框，请添加填充：

span.object { padding: 6px; }

修改：如果您不希望它们跨越行添加：

span.object { white-space: nowrap; }

比花车做这项特殊任务要容易得多。

IE7中的块元素文本溢出问题

2 个答案: