可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have the following code:

<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>

And I need IE7 (IE6 not needed and FF3.x works fine) to wrap the text correctly, which it does if I remove the contentEditable="true" from the divs. Just try this code with and without contentEditable and you'll see what I mean. Make the browser window small enough so you see how the text wraps.

Thanks.

回答1:

DEMO: http://jsbin.com/icavu4

try this can help solve a little the problem!

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

UPDATED:

Since this can be considered a workaround in part, it allow you to display it like FF but it cut of last part of the text, you may want provide the full text to edit on hover by using a little bit of javascript!

回答2:

O my! IE Developer Toolbar reveals that contentEditable triggers the infamous layout property

Having layout basically means an element is rectangular.

While there are several hacks out there forcing a layout, I think there's no way to actually remove it. :(

回答3:

Why don't you use display: block for the divs?

You could even use inline-block if they really need to be inline:

http://www.brunildo.org/test/InlineBlockLayout.html Do note that according to quirksmode the support in IE 6 and 7 is incomplete for this

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

回答4:

Short Answer: If you use display:inline-block instead of display:inline, then all the other browsers will behave like IE!

Detail: IE9 behaves the same way. SPAN behaves the same as DIV {display: inline}, which it should. Pumbaa80's Sep 1 response is the best one. Basically, ContentEditable must be rectangular in IE. So both SPAN and your DIV render as display:inline-block in IE. I use ContentEditable all the time in a content management system. I take advantage of the "feature" so that the user has some space to work with when the editable DIV is initially empty. In your example, if you delete all the text in "short", then good luck getting the cursor back into the element to put text back in. It just collapses down to nothing. In the CMS I toggle ContentEditable off and on, depending on if the user has selected Edit or Preview mode. At the same time, I toggle display between inline and block/inline-block, and I toggle the edit guides (your red border) off and on. ...Tom

回答5:

Have you tried the overflow property?

回答6:

Have you tried to use a SPAN instead of an DIV?

SPAN-tags are inline, without the need of display:inline.

Sorry, that I didn't tried, but I don't have any IE7, at this moment.

回答7:

dear friend, all versions of IE have some disadvantages. specially in parsing style sheets. for each version sytle rule have to modified. i suggest , you must use style rule for each version. ie. IE style hacks. from my knowledge , IE 6 version is best in all version of IE. it displays correctly what you write in style sheets.