Question

我有以下代码：

<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的代码，你就会明白我的意思。使浏览器窗口足够小，以便您查看文本的包装方式。

感谢。

Answer 1

DEMO： 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一样显示它，但它剪切了文本的最后部分，你可能想提供使用a悬停时编辑的全文一点点的javascript！

Answer 2

我的！ IE Developer Toolbar显示contentEditable触发the infamous layout property

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

虽然有几个黑客强迫layout，但我认为没有办法实际删除它。：（

Answer 3

为什么不将display: block用于div？

如果他们真的需要内联，你甚至可以使用inline-block：

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

是不完整的

Exapmles：http://jsfiddle.net/SNzBn/

Answer 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最初为空时，用户可以使用一些空间。在你的例子中，如果你删除“short”中的所有文本，那么祝你好运，将光标放回元素中以重新放入文本。它只是折叠成零。在CMS中，我会关闭和打开ContentEditable，具体取决于用户是否选择了“编辑”或“预览”模式。同时，我在内联和块/内联块之间切换显示，然后关闭和打开编辑指南（红色边框）。汤姆

Answer 5

您是否尝试过溢出属性？

Answer 6

您是否尝试过使用SPAN代替DIV？

SPAN标签是内联的，无需显示：内联。

对不起，我没试过，但此刻我没有任何IE7。

Answer 7

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

IE7 contentEditable自动换行

7 个答案: