Google Chrome 中的连续图像布局

Question

我正在开发一个网站，该网站的界面包含一系列 12 个 ASP.NET ImageButton 控件 - 六个在顶部，六个在底部。这些呈现为<input type="image" /> HTML 元素。它们应该从左到右排列，如下面的屏幕截图所示。

直到最近，标记正确地布置了 Firefox、IE 和 Chrome 中的图标。最近一位客户注意到，在 Chrome 中，图像不是水平排列的，而是一个在另一个之上，如下面的屏幕截图所示。

您可以在http://fuzzylogicinc.net/demos/snippet.html 看到正在运行的标记。如果您使用 IE 或 Firefox 查看按钮，则按钮布局正确，从左到右。如果您在最新版本的 Chrome 中查看，按钮会从上到下排列。

显然，标记是相同的，并且在上面的 demo/sn-p 中有最小的样式。我需要做什么才能让它在 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;" />

...

谢谢！

Answer 1

您的 td 宽度导致问题 100% .. 使它成为 - style="white-space: nowrap;"对于按钮行（第一行）

 <tbody><tr><td>..<td>..
 <td  style="white-space: nowrap;">
 <input type="submit" name="ctl00$Content01$btnGotoOrderNumber" value="Go" .....