4

我有以下 HTML 标记（简化）

<div class="controlDiv" style="white-space: nowrap">
  <div class="pre"></div><input style="width: 100%"><div class="post"></div>
  <div class="validationMsg" style="white-space: normal">some message</div>
</div>

内部 Div (validationMsg) 动态显示，在 FF 中，文本消息被正确包装，它不比上面的输入字段长。

但在 IE8 中空白属性被忽略，文本不会自动换行。我在 IE 开发人员工具中做了一些实验，当正确应用换行时，我已经关闭了空白属性（但输入字段前和后符号的格式失败，我们需要禁用换行）

代码看起来有点乱，但使用的框架非常严格，所以我只能在 controlDiv 中添加一个新的 div 或段落。

4

1 回答 1

1

这可能不是最好的解决方案，但 IE 的行为是将父级的 nowrap 应用于 validationMsg 的布局，因此无法自行设置“空白：正常”。我的解决方案是为validationMsg 提供一个包装器，其样式为“宽度：100%（或您想要应用于validationMsg div 的任何大小）；空白：正常”，因此布局对于IE 和其他浏览器来说都很好。

这是我发布的一个示例：http: //jsbin.com/edeqam/1

它在所有浏览器上看起来都是一致的。

于 2013-02-13T21:21:09.753 回答