如何让Chrome遵守这个规则呢？

Question

代码如下：

<table style='margin-left: auto; margin-right: auto; text-align: right;'>
 <tr>
  <td style='vertical-align: top;'>Title:</td>
  <td style='width: 400px;'><input type='text' style='border: 1px solid black; width: 100%;' />
 </tr>
 <tr>
  <td style='vertical-align: top;'>Content:</td>
  <td><textarea style='border: 1px solid black; width: 100%;' rows='7'></textarea></td>
 </tr>
</table>

这是在 Opera 和 FireFox（Linux 中）中的样子：

http: //files.quickmediasolutions.com/nuisance/opera.png http://files.quickmediasolutions.com/nuisance/firefox.png

但是然后在Chrome（也在 Linux 中）：

http://files.quickmediasolutions.com/nuisance/chrome.png

如您所见，第一个文本框的宽度不正确:(

我该如何解决此问题？

更新： 这里是演示该问题的实时页面。

Answer 1

啊哈！现在您已经发布了实时链接，这就更加清晰了。

问题是，您的 textarea 的左右填充均为 2px。因此，其右边缘计算为 2px + 100%，其计算结果为“td 右边缘向右2px” （因为 td 的右边缘为 100%）。

（我希望这足够清楚；我正在尽力:-)

要解决此问题，请在文本区域上放置 padding: 0 ，或放置 padding: 0 2px在输入上。