想让 CSS 文本换行在 IE7 中工作答案

【问题标题】：Want to get CSS Text Wrap working in IE7想让 CSS 文本换行在 IE7 中工作
【发布时间】：2010-10-02 07:35:10
【问题描述】：

以下代码在 FF3 中渲染效果很好，但在 IE7 中不起作用。有谁知道如何解决它？

<div style="padding-top:3px;padding-bottom:5px;width:650px;background:blue">
    <div style="height:50px;float:left;display:inline;width:500px;background:gray">http://www.brainsolis.com/2008/10/twitter-tools-for-comunity-and-love-for-...</div>
    <div style="width:100%;text-align:right;float-right;background:yellow">saaal is saaa twittertool ds ds dsdfsdsdfsdfsdfsdfsdfsd sdf dsf sdf sdf sdf sd ssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</div>

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

你不需要浮动一个元素，同时display:inline。此外，您不需要为 DIV 元素设置 width:100%。它们自然会占用所有可用的水平空间。

以下 CSS 应该可以实现您的尝试。

div.container {

}
  div.floated {
    width:50px;
    float:left;
  }
  div.textbody {
    /* styles */
  }
  br.clear {
    clear:both;
    height:0;
    line-height:0;
  }

<div class="container">
  <div class="floated">
    <p>This is floated</p>
  </div>
  <div class="textbody">
    <p>...text body...</p>
  </div>
  <br class="clear" />
</div>

有关 CSS 的更多信息，请查看w3schools，或观看CSS Videos at SampsonVideos。

【讨论】：

实际上，将 display: inline 设置为任何浮动的元素将有助于 IE6 正确呈现它。
那么最好通过条件cmets将其设置在IE6特有的样式表中。

【解决方案2】：

我没有检查您的示例，但这为我解决了 IE 包装问题：

div
{
  word-wrap: break-word;  /* for IE, force it to wrap text and keep it inside the div */
}

【讨论】：

这不起作用；不知道你为什么发布这个答案。没有遵循这个的标准，IE6 和 IE7 都没有使用这个。
@Kevin：此页面似乎表明这适用于 IE 5.5-7：developer.mozilla.org/en/CSS/word-wrap#AutoCompatibilityTable

【解决方案3】：

css 自动换行指令对我有用

在 ie6、7、8 和 chrome 中尝试过（像往常一样，即使没有它，firefox 也会正确包装我的文本）

似乎是一项 IE 发明，但也兼容 css3 (http://www.css3.com/css-word-wrap/)

【讨论】：