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

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

5 голосов
/ 24 октября 2011

Еще один вопрос "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 ]

5 голосов
/ 23 ноября 2011

Определение разрывов слов не выполняется одинаково в разных браузерах или в разных спецификациях. Я считаю, что 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 : Свойства разрыва строки (предупреждение о техническом состоянии!), Которые, кажется, допускают «прямой разрыв» между буквенно-цифровым символом и открывающей скобкой, например. Хотя это вряд ли хорошая идея в целом. Это даже допустило бы очень нечестные (и) рэб-брейки!

3 голосов
/ 23 сентября 2013

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

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

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

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

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

0 голосов
/ 24 января 2012

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

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

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

...