IE7 contentEditable перенос слов

У меня есть следующий код:

<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 отлично работает), чтобы обернуть текст правильно, что он делает, если я удалю contentEditable = "true" из div. Просто попробуйте этот код с и без contentEditable, и вы поймете, что я имею в виду. Сделайте окно браузера достаточно маленьким, чтобы увидеть, как текст обертывается.

Спасибо.

Ответ 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, но оно вырезает последнюю часть текста, вы можете предоставить полный текст для редактирования при наведении с помощью немного javascript!

Ответ 2

О мой! IE Developer Toolbar показывает, что contentEditable вызывает печально известное свойство layout

Наличие макета в основном означает, что элемент прямоугольный.

Пока есть несколько хакеров, которые вынуждают layout, я думаю, что нет способа удалить его.: (

Ответ 3

Почему вы не используете display: block для div?

Вы даже можете использовать inline-block, если они действительно должны быть встроенными:

http://www.brunildo.org/test/InlineBlockLayout.html Обратите внимание, что в соответствии с quirksmode поддержка в IE 6 и 7 является неполной для этого

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

Ответ 4

Короткий ответ: Если вы используете display:inline-block вместо display:inline, то все остальные браузеры будут вести себя как IE!

Подробнее: IE9 ведет себя одинаково. SPAN ведет себя так же, как DIV {display: inline}, что и должно. Ответ Pumbaa80 Sep 1 самый лучший. В принципе, ContentEditable должен быть прямоугольным в IE. Таким образом, оба SPAN и ваш DIV отображают как display:inline-block в IE. Я все время использую ContentEditable в системе управления контентом. Я использую "функцию", чтобы у пользователя было некоторое пространство для работы, когда редактируемый DIV изначально пуст. В вашем примере, если вы удалите весь текст в "коротком", то удачи верните курсор обратно в элемент, чтобы вернуть текст обратно. Он просто сворачивается до нуля. В CMS я переключаю ContentEditable в положение "включено" и "включено", в зависимости от того, выбрал ли пользователь режим "Редактировать" или "Предварительный просмотр". В то же время я переключаю отображение между встроенным и блочным/встроенным блоком, и я переключаю направляющие редактирования (красную рамку) в положение "включено" и "включено". ... Том

Ответ 5

Вы пробовали свойство переполнения?

Ответ 6

Вы пытались использовать SPAN вместо DIV?

Теги SPAN являются встроенными, без необходимости отображения: inline.

Извините, что я не пробовал, но в данный момент у меня нет IE7.

Ответ 7

Дорогой друг, все версии IE имеют некоторые недостатки. особенно при разборе таблиц стилей. для каждой версии правило sytle должно быть изменено. я предлагаю, вы должны использовать правило стиля для каждой версии. то есть. IE стиле хаки. Насколько мне известно, версия IE 6 лучше всего во всех версиях IE. он правильно отображает то, что вы пишете в таблицах стилей.