我有一个保龄球网络应用程序，允许输入详细的逐帧信息。其中一项功能是跟踪每个球击倒了哪些木瓶。为了显示这些信息，我让它看起来像一排木瓶:
o o o o o o o o o o
使用图像来代表木瓶。所以对于后排，我有四个img标签，然后是一个br标签。它工作得很好...大多数时候。问题在于小浏览器（如IEMobile）。在这种情况下，如果表格中有10或11列，并且每列可能有一排木瓶，Internet Explorer将尝试缩小列的大小以适应屏幕，结果导致出现以下情况:
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中查看时却不行。
有什么提示或建议吗？也许是一种不会实际添加空格的 之类的东西吗？
后续/总结
我收到并尝试了几个好建议，包括：
- 在服务器上动态生成整个图像。这是一个很好的解决办法，但不符合我的需求（托管在GAE上），而且比我想写的代码还多一点。这些图像也可以在第一次生成后被缓存。
- 使用CSS white-space声明。这是一个很好的基于标准的解决方案，但在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;
}
顺便说一下：不，我不会在最终解决方案中使用别人的清晰点的热链接 :)