表格在Firefox中看起來不錯，但在Chrome中卻一團糟

Question

請參閱所附圖片。 第二個圖像來自Firefox，看起來不錯，第一個圖像來自Chrome，這很混亂。

無論我有一個標簽和輸入框，在Chrome它會混亂。

兩者具有完全相同的代碼。

    <tr>
       <td class='sale-label-req'>First Name *</td>
       <td class='sale-label-req'><input type='text' name='Contact0FirstName' value='<?=$_POST['Contact0FirstName']?>'></td>
    </tr>
    <tr>
       <td class='sale-label-req'>Last Name *</td>
       <td class='sale-label-req'><input type='text' name='Contact0LastName' value='<?=$_POST['Contact0LastName']?>'></td>
    </tr>

舉個例子。

Answer 1

通常， <td>將水平呈現：

+--------------+------------+
| First Name*  | [_________]|
+--------------+------------+

而且在Chrome和FF中都可以。 由於FF將其呈現為

+--------------+
| First Name*  |
+--------------+
| [_________]  |
+--------------+

這可能不是相同的代碼，或者是CSS正在以一種Chrome無法理解的方式處理FF的表格數據標簽-反之亦然。

檢查原始HTML和隨附的CSS，在兩個瀏覽器上使用firebug和開發人員工具查看對這些元素實際應用的內容

Answer 2

似乎您要渲染同一行（ <tr>元素）中的兩個單元格（ <td>元素）， 就好像它們位於不同的行上一樣 。 正確的方法是將它們實際放在單獨的行中 （即，將它們包裝在單獨的<tr>元素中）：

<tr>
   <td class='sale-label-req'>First Name *</td>
</tr>
<tr>
   <td class='sale-label-req'><input type='text' name='Contact0FirstName' value='<?=$_POST['Contact0FirstName']?>'></td>
</tr>
<tr>
   <td class='sale-label-req'>Last Name *</td>
</tr>
<tr>
   <td class='sale-label-req'><input type='text' name='Contact0LastName' value='<?=$_POST['Contact0LastName']?>'></td>
</tr>

更好的是，停止使用表進行布局，而采用純CSS方法。

__

一些不相​​關的注釋：

• 直接在響應中包含未經過處理的用戶輸入（例如$_POST變量）會使您容易受到XSS攻擊 。
• 考慮使用<label>元素標記表單控件標簽，並在語義上指示它們與哪些元素相關。 這將有助於輔助功能，並且某些瀏覽器將在您單擊目標表單控件的標簽時將其焦點對准。

Answer 3

您需要設置樣式表，並為html中的每個標簽提供特定的空格。 不要給出固定大小。 設法處理重復性，絕對性，並將前視圖一個接一個地設置。 z-index以在上方或下方顯示它們。 按順序開始設置。 一開始有點混亂...祝你好運。 這可能會有所幫助。 如果您也嘗試在其他瀏覽器中打開它，可能會令您震驚。