表格在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*  |
+--------------+
| [_________]  |
+--------------+

这是不是相同的代码，或者是一个以Chrome无法理解的方式处理FF的表格数据标签的CSS，反之亦然。

检查原始HTML和包含的CSS，在两个浏览器上使用firebug和开发人员工具来查看实际应用于这些元素的内容

Answer 2

您似乎正在尝试渲染同一行（<td>元素）的两个单元格（<tr>元素），就好像它们位于不同的行上一样 。正确的方法是实际将它们放在单独的行中（即将它们包装在单独的<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 attacks的攻击。<​​/ li>
• 考虑使用<label>元素标记表单控件标签，并在语义上指明它们与哪些元素相关。这将有助于访问，如果单击其标签，某些浏览器将关注目标表单控件。

Answer 3

您需要设置样式表并为html中的每个标记指定特定空格。 不要给出固定的尺寸。管理与相关，绝对，并一个接一个地设置前视图。 z-index将它们显示在上方或下方。开始按顺序设置。祝它在开始时有点凌乱......祝你好运。它可能有所帮助。如果你试图在其他浏览器中打开它可能会让你震惊..