Элементы не переносятся должным образом в IE 8/ 9

Еще один вопрос "IE делает что-то отличное от других браузеров", но этот вопрос немного необычен, поскольку IE7 делает правильные вещи, а IE 8 и 9 - нет.

Здесь ситуация, у меня есть простой 3 колонки макета. Первые 2 столбца имеют фиксированную ширину, а третий я хочу иметь переменную ширину, чтобы он занимал доступное пространство.

Я вывожу текстовые данные в третьем столбце. Текстовые данные должны быть свободны для переноса в конце значения / предложения данных - поэтому я вывожу их как.

<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>

(Смотрите также пример ниже)

все работает как шарм в FF, Chrome и IE7, но Internet Explorer 8 и 9 рассматривают последовательные пролеты nowrap как 1 большой элемент nowrap (т.е. он помещает все значения в одну строку). Между пролетами есть пустое пространство, поэтому (IMO) его можно свободно переносить. Единственный способ, которым я могу получить IE8/9, чтобы обернуть, как я хочу, состоит в том, чтобы включить некоторое непустое пространство между натянутыми промежутками.

Этот обходной путь в порядке, но мне интересно знать:

  • Правильно или неправильно отображает разметка IE (т.е. я ожидаю, что значения должны переноситься неправильно. Я только предполагаю, что IE виноват, потому что другие браузеры делают это по-другому)
  • Есть ли более изящное решение, чем то, которое у меня есть: в идеальном мире я хотел бы убедиться, что разделительная запятая никогда не будет перенесена на начало новой строки.

заранее спасибо

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
    <style type="text/css">
        .leftBit {float:left; margin-right: 10px; background-color: yellow;}
        .middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
        .remainder {margin-left: 420px;  min-width: 200px;background-color: #DDD;}
        .nowrap { white-space:nowrap;}
        .clear {clear: both;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
            <div class="remainder">
                <span>Blue the colour of the sea and the sky, </span> 
                <span>Green green green green of home, </span> 
                <span>Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">I don't know why these values do not wrap?  They do in FF and chrome and IE7 but not IE8/9</div>
            <div class="remainder">
                <span class="nowrap">Blue the colour of the sea and the sky, </span> 
                <span class="nowrap">Green green green green of home, </span> 
                <span class="nowrap">Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements.  Is this a bug or expected behaviour?</div>
            <div class="remainder">
                <span class="nowrap">Blue the colour of the sea and the sky </span> ,
                <span class="nowrap">Green green green green of home </span> ,
                <span class="nowrap">Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <hr />
    </form>

</body>
</html>
Источник

3 ответа

Решение

Определение разрывов слов не выполняется одинаково в разных браузерах или в разных спецификациях. Я считаю, что Firefox - это единственный последний выпуск, который отформатирует так, как вы ожидаете. Существуют определенные ситуации, когда Chrome также выходит из родительского окна.

Таким образом, для получения согласованного вывода в HTML должны быть предоставлены ручные подсказки.

В конкретном примере один из способов обойти это - использовать символ Юникод для Zero Width Space. Это разобьет ваш код без дополнительного пространства.

<span class="nowrap">foo bar</span>&#8203;
<span class="nowrap">moo bahh</span>

Если по какой-то причине вы не можете использовать код Unicode, вы можете попробовать html-сущность &thinsp; который является тонким пространством. Это, однако, внесет дополнительное пространство в ваш вывод html.

Хотя это кажется проблемой, когда между браузерами должна быть согласованность, http://www.cs.tut.fi/~jkorpela/html/nobr.html цитирует несколько технических документов и их различия в том, как слова должны быть разбиты, в дополнение к различным интерпретациям браузера этих документов. Я предполагаю, что общая стратегия каждого браузера играет роль в этом конкретном примере.

За исключением предварительно отформатированных элементов -, каждый элемент структурирования блока рассматривается как абзац, беря символы данных в его содержимом и содержимое его дочерних элементов, объединяя их и разделяя результат на слова, разделенные пробелом, табуляцией или записью конечные символы (и, возможно, дефисные символы). Последовательность слов набирается как абзац, разбивая его на строки.

Источник: HTML 2.0, раздел " Символы, слова и абзацы"

В HTML есть два типа дефисов: простой дефис и мягкий дефис. Простой дефис должен интерпретироваться пользовательским агентом как просто другой символ. Мягкий дефис сообщает агенту пользователя, где может произойти разрыв строки.

Источник: HTML 4.0, раздел переноса слов

см. Технический отчет Unicode № 14: Свойства разрыва строки (предупреждение о техническом состоянии!), который, кажется, допускает "прямой разрыв" между буквенно-цифровым символом и открывающей скобкой, например. Хотя это вряд ли хорошая идея в целом. Это даже допустило бы очень нечестные перерывы!

Источник

Благодаря ответу @nosilleg я сделал отличное решение, используя только CSS.

Учитывая, что вы уже используете классы, это легко, добавьте это;

.nowrap:before {
    content : '\200B';
}

То, что это делает, вставляет символ Zero Width Space непосредственно перед каждым из ваших nowrap элементы, без вас редактирование HTML!
Теперь вам не нужно добавлять в эту надоедливую сущность HTML каждый раз, когда вы используете nowrap учебный класс.

Работал в IE8 и 9 и не влиял на другие браузеры.

Источник

Я надеюсь, что IE9/ любой может быть представлен как IE8/ любой, добавив ниже строку мета в заголовке HTML

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

тогда это работает так, как нам нравится

Источник
Другие вопросы по тегам