如何让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

正如你ç一看，第一个文本框不是正确的宽度:(

我该如何解决这个问题？

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

Answer 1

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

问题是，您的textarea从左侧和右侧有2像素的填充。因此，右边的计算公式为2px + 100%，其值为td的右边缘（因为td的右边缘为100％）的右边为“2px”。

（我希望这是很清楚，我想我最好的:-)

为了解决这个问题，要么把padding: 0上textarea的，或把padding: 0 2px输入。