IE7 contentEditable перенос слов - PullRequest
Новая
       15

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

11 голосов
/ 11 ноября 2009

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

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

Спасибо.

Ответы [ 7 ]

1 голос
/ 29 сентября 2010

ДЕМО: 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!

0 голосов
/ 02 октября 2010

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

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

0 голосов
/ 29 сентября 2010

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

0 голосов
/ 24 сентября 2010

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

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

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

0 голосов
/ 09 сентября 2010

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

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

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

Пример: http://jsfiddle.net/SNzBn/

0 голосов
/ 02 сентября 2010

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

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

Хотя существует несколько хаков, заставляющих layout, я думаю, что на самом деле удалить это невозможно. (

0 голосов
/ 12 января 2010

Вы пробовали свойство overflow ?

...