1

看这张表：

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

4

1 回答 1

2

我已经解决了这个问题，我不应该不回答它。有人可能会发现这个答案很有用。

问题是关于 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>

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

于 2012-11-05T04:22:00.970 回答