多个输入字段

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渲染顺序。 表格单元先渲染后大于一个，如果我将宽度保留为auto。

Firefox和Opera解析整个表格，而不是均匀分配可用宽度。 这在我看来是正确的。

Chrome修复程序是使用百分比表中的每个元素。 请勿保留任何自动值。

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

现在没有必要放弃表格或使用绝对像素尺寸。