Google Chrome中的連續圖像佈局

Question

我正在開發一個網站，其中包含一系列12個ASP.NET ImageButton控件的界面 - 六個位於最上方，六個位於底部。這些呈現爲HTML元素<input type="image" />。正如下面的屏幕截圖所顯示的，它們是從左到右排列的。

的標記正確地制定了在Firefox，IE和Chrome的圖標，直到最近。最近有客戶注意到，在Chrome中，圖像並非水平放置，而是一個放在另一個之上，如下面的屏幕截圖所示。

您可以在http://fuzzylogicinc.net/demos/snippet.html在行動中看到的標記。如果您使用IE或Firefox瀏覽它，則按鈕從左到右正確佈局。如果您在最新版本的Chrome瀏覽器中查看它，則按鈕將從上至下排列。

顯然，標記是相同的，並且在上面的demo/snippet中有最小的樣式。我需要做些什麼才能在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％。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" .....