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，则首先渲染的表格单元格大于1。

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

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

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

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

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

1 个答案: