多個輸入字段

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> 

現在沒有必要放棄表格或使用絕對像素尺寸。