td宽度问题内的多个输入字段答案

【问题标题】：Multiple input fields inside td width issuetd宽度问题内的多个输入字段
【发布时间】：2012-10-23 16:39:57
【问题描述】：

看看这张表：

<div style="position: absolute; right:0; top:0; width:100px;">
    <table style="width: 100%; border-bottom: white 1px solid">
      <tr>
        <td>X:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Y:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Z:</td>
        <td><input type="text" style="width:100%"/></td>
      </tr>
    </table>
</div>

http://jsfiddle.net/MDLMz/2/

在 Firefox 中输入字段宽度相等，但在 Chrome 中右侧和中间的宽度较小。

我不知道会发生这种情况，没有任何线索。

您知道在 Chrome 中解决此问题的任何解决方案吗？

【问题讨论】：

标签： html css google-chrome input html-table

【解决方案1】：

我已经解决了这个问题，我不应该对此置之不理。有人可能会觉得这个答案很有用。

问题是关于 webkit 如何渲染顺序。如果我将宽度保留为自动，则首先呈现的表格单元格大于之后的一个。

Firefox 和 Opera 解析整个表格，而不是平均分配可用宽度。我认为这是正确的方法。

Chrome 修复是对表格中的每个元素使用百分比。不要留下任何自动值。

<table style="width: 100%">
      <tr>
        <td style="width:10%">X:</td>
        <td><input type="text" style="width:90%"/></td>
      </tr>
</table>

现在无需放弃表格或使用绝对像素大小。

【讨论】：