IE7 contentEditable 自动换行答案

【问题标题】：IE7 contentEditable word wrappingIE7 contentEditable 自动换行
【发布时间】：2010-12-15 13:37:51
【问题描述】：

我有以下代码：

<html>

<style type="text/css">

DIV { display:inline; border: solid red 1px; }

.editable { background:yellow; }

</style>

<div class="editable" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</div>

<div class="editable" contentEditable="true"> short </div>

<div class="editable" contentEditable="true"> This is test text.This is test text.This is test text.his is test text.Thihis is test text.Thihis is test text.Thihis is test text.Thi </div>

我需要 IE7（不需要 IE6，FF3.x 可以正常工作）来正确包装文本，如果我从 div 中删除 contentEditable="true" 就可以了。只需尝试使用和不使用 contentEditable 的代码，您就会明白我的意思。使浏览器窗口足够小，以便您看到文本的换行方式。

谢谢。

【问题讨论】：

IE8 的行为与 IE7 相同，如果您好奇的话。
我在 ie8 中发现了完全相同的问题。我试图解决使用 -ms-word-break : break-all 的问题，以明确表示我想要默认换行，但没有机会。所有其他浏览器都正确。

标签： html internet-explorer internet-explorer-7 contenteditable

【解决方案1】：

演示： http://jsbin.com/icavu4

试试这个可以帮助解决一点问题！

<!--[if gte IE 7]>
<style type="text/css">
.editable {
    overflow:hidden;
    float:left;
    height:20px;
    border: solid red 1px;
    background: yellow;
}
</style>
<![endif]-->

更新：

由于这在某种程度上可以被认为是一种解决方法，它允许您像 FF 一样显示它，但它会剪切文本的最后一部分，您可能需要提供使用鼠标悬停编辑全文一点点javascript！

【讨论】：

【解决方案2】：

天哪！ IE开发者工具栏显示contentEditable触发the infamous layout property

布局基本上意味着元素是矩形的。

虽然有几个黑客强制使用layout，但我认为实际上没有办法删除它。 :(

【讨论】：

【解决方案3】：

为什么不使用display: block 作为 div？

如果确实需要内联，您甚至可以使用 inline-block：

http://www.brunildo.org/test/InlineBlockLayout.html 请注意，根据quirksmode，对此 IE 6 和 7 的支持是不完整的

示例：http://jsfiddle.net/SNzBn/

【讨论】：

【解决方案4】：

简短回答：如果您使用display:inline-block 而不是display:inline，那么所有其他浏览器的行为都会像IE！

详情： IE9 的行为方式相同。 SPAN 的行为与DIV {display: inline} 相同，应该如此。 Pumbaa80 9 月 1 日的回应是最好的回应。基本上，ContentEditable 在 IE 中必须是矩形的。所以 SPAN 和你的 DIV 在 IE 中都呈现为display:inline-block。我一直在内容管理系统中使用 ContentEditable。我利用了“功能”，以便用户在可编辑的 DIV 最初为空时有一些空间可以使用。在您的示例中，如果您删除“短”中的所有文本，那么祝您好运将光标放回元素中以将文本放回原处。它只会崩溃到什么都没有。在 CMS 中，我关闭和打开 ContentEditable，这取决于用户是否选择了编辑或预览模式。同时，我在 inline 和 block/inline-block 之间切换显示，并关闭和打开编辑指南（你的红色边框）。 ...汤姆

【讨论】：

【解决方案5】：

您是否尝试过 overflow 属性？

【讨论】：

【解决方案6】：

您是否尝试过使用 SPAN 而不是 DIV？

SPAN 标记是内联的，不需要 display:inline。

对不起，我没试过，但我现在没有任何 IE7。

【讨论】：

【解决方案7】：

亲爱的朋友，所有版本的IE都有一些缺点。特别是在解析样式表时。对于每个版本的样式规则都必须修改。我建议，您必须为每个版本使用样式规则。 IE。 IE 风格的黑客。据我所知，IE 6 版本是所有 IE 版本中最好的。它可以正确显示您在样式表中编写的内容。

【讨论】：