11

我有以下代码：

<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 的代码，您就会明白我的意思。使浏览器窗口足够小，以便您看到文本是如何换行的。

谢谢。

4

7 回答 7

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 来提供全文以在悬停时进行编辑！

于 2010-09-29T19:24:47.367 回答
0

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

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

于 2010-10-02T06:24:24.550 回答
0

哦，我的！IE Developer Toolbar 显示contentEditable触发臭名昭著的layout属性

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

虽然有几个黑客强迫 a layout，但我认为没有办法真正删除它。:(

于 2010-09-01T20:20:45.493 回答
0

为什么不使用display: blockdiv 呢？

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

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

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

于 2010-09-09T10:05:29.493 回答
-1

您是否尝试过溢出属性？

于 2010-01-12T11:52:39.747 回答
-1

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

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

抱歉，我没有尝试过，但我目前没有任何 IE7。

于 2010-09-23T20:26:40.890 回答
-2

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

于 2010-09-29T11:58:20.707 回答