Элементы не упаковываются должным образом в IE 8/9
Еще один вопрос «IE делает что-то отличное от других браузеров», но он немного необычен, поскольку IE7 делает правильные вещи, а IE 8 и 9 - нет.
Вот ситуация, у меня простая трехколоночная раскладка. Первые 2 столбца имеют фиксированную ширину, а третий я хочу иметь переменную ширину, чтобы использовать доступное пространство.
Я вывожу текстовые данные в третьем столбце. Текстовые данные должны быть свободны для переноса в конец значения / предложения данных, поэтому я вывожу его как.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(См. Также пример ниже)
все работает как шарм в FF, Chrome и IE7, но Internet Explorer 8 и 9 обрабатывают последовательные промежутки nowrap как 1 большой элемент nowrap (т.е. помещает все значения в одну строку ). Между промежутками есть пробелы, поэтому (ИМО) его можно обернуть бесплатно. Единственный способ заставить 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>