かなり詳細なフレームごとの情報入力を可能にするボウリング Web アプリケーションがあります。それが可能にすることの1つは、各ボールでどのピンがノックダウンされたかを追跡することです. この情報を表示するために、ピンのラックのように表示します。
うーん うーん ああ o
ピンを表すために画像が使用されます。後列には、4 つのimgタグとbrタグがあります。それはうまく機能します...ほとんど。問題は、IEMobile などの小さなブラウザーにあります。この場合、表に 10 または 11 の列があり、各列にピンのラックがある場合、Internet Explorer は画面に収まるように列のサイズを縮小しようとします。これ：
うーん 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;
}
PS：いいえ、最終的な解決策で他の誰かのクリアドットをホットリンクするつもりはありません:)