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

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

我该如何解决这个问题？

更新： here是一个展示问题的实时页面。

Answer 1

啊哈！现在你发布了一个实时链接，这一点就更清楚了。

问题是，您的textarea左右填充了2px。因此，它的右边缘计算为2px + 100%，其评估为“{em> 2px从td的右边缘”（因为td右边缘是100％）。

（我希望这很清楚;我正在努力： - ）

要解决此问题，请将padding: 0放在textarea上，或将padding: 0 2px放在输入上。

如何让Chrome遵守此规则？

1 个答案: