У меня есть веб-приложение для боулинга, которое позволяет вводить довольно подробную покадровую информацию. Он позволяет отслеживать, какие штифты были сбиты на каждом шаре. Для отображения этой информации я выгляжу как стойка с булавками:
o o o o
o o o
o o
o
Изображения используются для представления контактов. Итак, для заднего ряда у меня есть 4 тега img, затем тег br. Прекрасно работает ... в основном. Проблема в небольших браузерах, таких как IEMobile. В этом случае, когда в таблице может быть 10 или 11 столбцов, а в каждом столбце может быть стойка выводов, IE попытается уменьшить размер столбца, чтобы он уместился на экране, и в итоге я получаю нечто подобное :
o o o
o
o o o
o o
o
или
o o
o o
o o
o
o o
o
Структура:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
Внутри div нет пробелов. Если вы посмотрите на эту страницу в обычном браузере, она должна отображаться нормально. Если вы посмотрите на него в IEMobile, это не так.
Любые советы или предложения? Может быть, что-то вроде & nbsp; это на самом деле не добавляет пробел?
<Ч />
Followup / Резюме
Я получил и попробовал несколько хороших предложений, в том числе:
- Динамически генерировать все изображение на сервере. Хорошее решение, но на самом деле не соответствует моим потребностям (размещено на GAE) и немного больше кода, чем я хотел бы написать. Эти изображения также могут быть кэшированы после первого поколения.
- Использовать объявление пустого пространства CSS. Хорошее решение на основе стандартов, с треском проваливается в представлении IEMobile.
Что я в итоге сделал
висит голова и что-то бормочет
Да, все верно, прозрачный GIF-файл в верхней части div, размером с нужную мне ширину. Код завершения (упрощенно) выглядит так:
<table class="game">
<tr class="analysis leave">
<!-- ... -->
<td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
<!-- ... -->
</tr>
</table>
И CSS:
div.smallpins {
background: url(/img/lane.gif) repeat;
text-align: center;
padding:0;
white-space: nowrap;
}
div.smallpins img {
width:1em;
height:1em;
}
div.smallpins img.spacer {
width:4.5em;
height:0px;
}
table.game tr.leave td{
padding:0;
margin:0;
}
table.game tr.leave .smallpins {
min-width:4em;
white-space: nowrap;
background: none;
}
p.s. Нет, я не буду ссылаться на чью-то четкую точку в моем окончательном решении :))