如何讓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輸入。