html - td 宽度问题内的多个输入字段

Question

看这张表:

<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 中解决此问题的任何解决方案吗？

Answer 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>

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