HTML中不间断的非空格
我有一个保龄球Web应用程序，它允许相当详细的逐帧信息输入。它允许做的一件事是跟踪每个球上的哪些销被击倒。为了显示此信息，我使它看起来像一排别针：
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中查看它，则不会。
有任何提示或者建议吗？也许其中的某种实际上并没有增加空间？
随访/总结
我收到并尝试了一些好的建议，包括：
- 在服务器上动态生成整个映像。好的解决方案，但不能真正满足我的需要(托管在GAE上)，并且代码比我想写的要多。这些图像也可以在第一代之后进行缓存。
- 使用CSS空格声明。好的基于标准的解决方案在IEMobile视图中失败了。
我最终做了什么
垂头咕and
是的，没错，是div顶部的透明gif，大小与我需要的宽度相同。结束代码(简化)如下所示：
<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.不，我不会在最终解决方案中热链接其他人的清晰点:)
解决方案
为什么不为引脚的所有可能结果提供图像？浏览器的布局不会混乱图像就是图像
快速生成它们，将创建的图像缓存以供重用。
我们可能需要在分号后紧跟一个实际空间
我过去通过动态创建整个图像(具有适当的引脚排列)作为单个图像来解决此类问题。如果我们使用的是ASP.NET，则使用GDI调用非常容易。我们只需使用大头针位置动态创建图像，然后将其作为单个图像提供给页面。将所有对齐问题从图片中删除(双关语意味)。
由于无论如何都在使用图像，为什么不动态生成代表整个布局的图像？我们可以使用GD或者ImageMagick之类的方法来完成此操作。
尝试在与<td> ... </ td>相同的行上使用<div>标签。
我可能会误解了追求，但我认为我们可以做我对地图上的徽标所做的事情。
绘制地图背景图块，然后告知每个图像向左浮动，并提供一些有趣的边距，以便将它们定位在我希望的位置(查看源代码以了解其效果)。
这样做会不会更容易？
<div id="container">
<div id="row1">
<img/><img/><img/><img/>
</div>
<div id="row2">
<img/><img/><img/>
</div>
<div id="row3">
<img/><img/>
</div>
<div id="row4">
<img/>
</div>
</div>
CSS将如何处理对齐方式？
.container div{
text-align:center;
}
我们可以在包含的div中尝试使用CSS的" nowrap"选项。
{white-space: nowrap;}
不确定支持的范围。
最有意义的是更改即时显示哪个图像：
<div id="pin-images">
<img src="fivepins.jpg" />
<img src="fourpins.jpg" />
<img src="threepins.jpg" />
<img src="twopins.jpg" />
<img src="onepin.jpg" />
</div>
在td标签中添加" nowrap" ...
使用单词木偶字符U + 2060(即``)''
也许这只是一种情况，我们可以使用表来强制布局。这不是最佳选择，我知道我们不应该将表格用于非表格形式的事物，但是我们可以执行以下操作。
<table> <tr> <td><img src="Pin.jpg"></td> <td> </td> <td><img src="Pin.jpg"></td> <td> ></td> <td><img src="Pin.jpg"></td> <td> </td> <td><img src="Pin.jpg"></td> </tr> <tr> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><img src="Pin.jpg"></td> <td> </td> <td> </td> <td> </td> </tr> </table>
由于要获得最大的兼容性，因此我们是否考虑过生成代表框架的单个图像？
如果我们使用的是PHP，则可以使用GD根据用于创建问题HTML的相同输入来动态创建表示框架的图像。这样做的最大好处是，任何可以显示PNG或者GIF的浏览器都可以显示框架。
我们是否尝试为列定义宽度？类似于<td width =" 123px">或者<td style =" width：123px">。也许也适合div？
我们可以将img替换为span，并在每个span上使用背景图片，具体取决于css类：
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>... <p class="..."><span class="pin"></span><span> </span><span class="pin"></span>... <p class="..."><span class="pin"></span><span> </span><span class="pin"></span>... <p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(个人观点，我认为最好将4行带有p标签而不是将单个div与br一起使用)
在CSS中，我们可以有类似以下内容：
p.smallpins {
margin: 0;
padding: 0;
height: 11px;
font-size: 1px;
}
p.smallpins span {
width: 11px;
background-image: url(nopinsmall.gif);
background-repeat: ...
background-position: ...
}
p.smallpins span.pin {
background-image: url(pinsmall.gif);
}
- 这里有nobr html标签；不过，不知道这有多好的支持。
- 我们可以在元素(图像)之间使用css溢出：可见的和不间断的空格，但这些行中的html中没有其他空格。
每行的每种可能布置都有单独的图像。
那只需要30张图像(16 + 8 + 4 + 2)
这已经有一段时间了，但是我只是仔细阅读了一下，发现了这篇文章。无论我做什么，我都无法连续获取图像。无论如何，它们都会包裹起来。我尝试了一切。
然后我发现客户端上有一个设置，他们可以选择以下视图：1)单列，2)桌面视图和3)适合窗口。根据MSDN，默认值应该是适合窗口。但是我妻子的IE手机默认为"单列"。没什么要紧的，它会将所有内容包装到单个列中。如果我切换到其他2个选项中的任何一个，它看起来都很好。
好吧，我们可以使用meta标签进行设置：
<meta name="MobileOptimized" content="320">
将页面宽度设置为320px。不知道如何使其自动运行，如果有人知道，请发布。
在v4.6之前的blackberry上，这无法正常工作，除非我们手动更改为桌面视图，否则我们只能使用单列。在4.6或者更高版本中，以下代码应该可以工作，但我尚未进行测试：
<meta name="viewport" content="width=320">
