HTML 中不间断的非空格
-
01-07-2019 - |
题
我有一个保龄球 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 看来却惨遭失败。
我最终做了什么
低下头,咕哝着什么
是的,没错,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;
}
附注不,我不会在我的最终解决方案中热链接其他人的明确点:)
解决方案
您可以尝试在包含的 div 中使用 css“nowrap”选项。
{white-space: nowrap;}
不确定支持的范围有多大。
其他提示
我过去通过动态地将整个图像(具有适当的引脚排列)创建为单个图像来解决此类问题。如果您使用 ASP.NET,则通过 GDI 调用可以很容易地做到这一点。您只需通过图钉放置动态创建图像,然后将其作为单个图像提供给页面。消除所有对齐问题(双关语)。
为什么不为引脚的所有可能结果提供图像?不要搞乱浏览器的布局图像就是图像
动态生成它们,缓存创建的图像以供重用。
最有意义的是更改动态显示的图像:
<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”...
既然您要获得最大的兼容性,您是否考虑过生成代表框架的单个图像?
如果您使用 PHP,则可以使用 GD 动态创建表示框架的图像,该图像基于您在问题中用于创建 HTML 的相同输入。这样做的最大优点是任何可以显示 PNG 或 GIF 的浏览器都可以显示您的框架。
这已经在这里有一段时间了,但我刚刚经历过这个并发现了这篇文章。无论我做什么,我都无法连续显示图像。不管怎样,他们都会包裹起来。我尝试了一切。
然后我发现客户端上有一个设置,他们可以选择视图为 1) 单列、2) 桌面视图和 3) 适合窗口。根据 MSDN,默认值应该适合窗口。但我妻子的 IE 手机默认为单列。所以无论如何,它都会将所有内容包装到一个列中。如果我切换到其他两个选项中的任何一个,它看起来都很好。
好吧,你可以使用元标记来设置它:
<meta name="MobileOptimized" content="320">
将页面宽度设置为 320px。不知道怎么调到自动模式,有知道的请留言。
这在 v4.6 之前的黑莓手机上不起作用 - 除非用户手动更改为桌面视图,否则您将只能使用单列。对于 4.6 或更高版本,以下内容应该可以工作,但我尚未测试:
<meta name="viewport" content="width=320">
您可能需要紧跟在分号后面的实际空格
尝试使用 <div>
标记在同一行 <td>...</td>
我可能误解了你的目的,但我认为你可以做到我所做的 用于地图上的徽标.
绘制地图背景图块,然后每个图像被告知向左浮动并给出一些有趣的边距,以便它们按照我想要的方式定位(查看源代码以了解它是如何完成的)。
使用单词连接符 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>
您是否尝试过定义列的宽度?喜欢 <td width="123px">
或者 <td style="width:123px">
. 。也许也适用于 div ?
- 有的是 诺布尔 html标签;但不确定这是否得到了很好的支持。
- 你可以使用CSS 溢出:可见 以及元素(图像)之间的不间断空格,但这些行的 html 中没有其他空格。
为每种可能的排列提供单独的图像 每行的.
只需要 30 张图像 (16+8+4+2)
您可以用 span 替换 img 并在每个 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 标签,而不是带有 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);
}
如果你这样做不是更容易吗?
<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;
}