1

私は一連の12個のASP.NETImageButtonコントロール（上部に6個、下部に6個）を備えたインターフェイスを備えたWebサイトで作業しています。<input type="image" />これらはHTML要素としてレンダリングされます。以下のスクリーンショットが示すように、これらは左から右に配置されることを意図しています。

12個の画像アイコンは、左から右に、1つの行が別の行の上に配置されています。

マークアップは、最近までFirefox、IE、Chromeのアイコンを正しくレイアウトしていました。最近、お客様は、Chromeでは画像が水平に配置されておらず、下のスクリーンショットに示すように、画像が上下に配置されていることに気付きました。

Chromeでは、12個の画像アイコンが上下に配置されています。

マークアップの動作はhttp://fuzzylogicinc.net/demos/snippet.htmlで確認できます。IEまたはFirefoxを使用して表示すると、ボタンは左から右に正しく配置されます。Chromeの最新バージョンで表示すると、ボタンは上から下に配置されます。

マークアップは明らかに同じであり、上記のデモ/スニペットには最小限のスタイルがあります。Chromeで動作させるには何をする必要がありますか？

これが画像ボタンの（省略された）マークアップです。適用される追加のスタイリングはありません。

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

...

<br />

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

<input type="image" name="..." id="..." title="General Invoice" src="..." style="height:20px;border-width:0px;" />

...

ありがとう！

4

1 に答える 1

0

あなたのtd幅が100％の問題を引き起こしています..make it --style = "white-space：nowrap;" ボタン列（1列目）

 <tbody><tr><td>..<td>..
 <td  style="white-space: nowrap;">
 <input type="submit" name="ctl00$Content01$btnGotoOrderNumber" value="Go" .....
于 2013-02-27T04:39:19.047 に答える