Question

我有一个保龄球网络应用程序，允许非常详细的逐帧信息输入。它允许的一件事是跟踪每个球被击倒的针脚。为了显示这些信息，我让它看起来像一个针架：

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中没有空格。如果您在常规浏览器中查看this page，它应该显示正常。如果你在IEMobile中查看它，它就不会。

任何提示或建议？也许是某种＆amp; nbsp;实际上并没有添加空格？

跟进/摘要

我收到并尝试了一些好的建议，包括：

在服务器上动态生成整个图像。很好的解决方案，但并不真正符合我的需要（托管在GAE上），还有比我想写的更多的代码。这些图像也可以在第一代之后进行缓存。
使用CSS空白声明。基于良好标准的解决方案在IEMobile视图中惨遭失败。

我最终做了什么

挂头并嘟something

是的，这是正确的，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。不，我不会在最终的解决方案中将别人的明确点连接起来：）

Answer 1

您可以在包含div中尝试使用css“nowrap”选项。

{white-space: nowrap;}

不确定支持的范围有多广。

Answer 2

为什么没有针对引脚的所有可能结果的图像？没有与浏览器布局混淆，图像是图像

快速生成它们，缓存创建的图像以供重复使用。

Answer 3

我过去通过动态创建整个图像（具有适当的引脚排列）作为单个图像来解决这类问题。如果您使用的是ASP.NET，那么使用GDI调用就很容易了。您只需使用引脚放置动态创建图像，然后将该页面作为单个图像提供给页面。将所有对齐问题排除在图片之外（双关语）。

Answer 4

最有意义的是改变即时显示的图像：

<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>

Answer 5

由于您仍在使用图像，为什么不动态生成代表整个布局的图像？您可以使用GD或ImageMagick之类的方法来完成这项工作。

Answer 6

在你的td标签中添加“nowrap”......

Answer 7

这已经有一段时间了，但我刚刚经历了这个并找到了这篇文章。无论我做了什么，我都无法让图像连续出现。无论如何，他们都会包装。我尝试了一切。

然后我发现客户端上有一个设置，可以选择视图为1）单列，2）桌面视图，3）适合窗口。根据MSDN，默认应该是适合窗口。但我的妻子的IE手机默认为单列。无所谓什么，它会把所有东西都包装成一个列。如果我切换到其他2个选项中的任何一个，它看起来很好。

好吧，您可以使用元标记设置：

<meta name="MobileOptimized" content="320">

将页面宽度设置为320px。不知道如何让它去汽车，如果有人知道，请发布。

这不适用于v4.6之前的黑莓手机 - 除非用户手动更改为桌面视图，否则您将无法使用单列。使用4.6或更高版本，以下应该可以工作，但我没有测试过：

<meta name="viewport" content="width=320">

Answer 8

由于您要获得最大的兼容性，您是否考虑过生成表示帧的单个图像？

如果您正在使用PHP，则可以使用GD根据您在问题中用于创建HTML的相同输入动态创建表示帧的图像。这样做的最大好处是任何可以显示PNG或GIF的浏览器都能显示你的画面。

Answer 9

我可能误解了你的想法，但我认为你可以做我已经做过的事情for logos on a map。

绘制地图背景图块然后告诉每个图像向左浮动并给出一些有趣的边距，以便它们按照我希望的方式定位（查看源代码以了解它是如何完成的）。

Answer 10

使用单词joiner character，U + 2060（即⁠）

Answer 11

也许这只是一种可以使用表来强制布局的情况。它不是最优的，我知道你不应该把表用于非表格的东西，但是你可以做这样的事情。

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Answer 12

使用与<div>

相同的行中的<td>...</td>标记进行试用

Answer 13

您是否尝试为列定义宽度？与<td width="123px">或<td style="width:123px">一样。也许也为div？

Answer 14

你可以用span替换img，并使用每个跨度的背景图像，具体取决于css类：

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

（personnaly我认为最好有4行带有p标签而不是带有br的单个div）

在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);
}

Answer 15

有 nobr html标记;但不确定这是多么好的支持。
您可以在元素（图片）之间使用css overflow：visible 和不间断的空格，但这些行的html中没有其他空格。

Answer 16

为每行的每个可能安排设置单独的图像。

这只需要30张图片（16 + 8 + 4 + 2）

Answer 17

中的分号后面可能需要一个实际空格

Answer 18

如果你这样做会不容易吗？

<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;
}

HTML中不间断的非空格

跟进/摘要

我最终做了什么

18 个答案: