Comment faire Chrome obéir à cette règle?

Question

Voici le code:

<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> 

Voici à quoi il ressemble dans Opera et FireFox (sous Linux):

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

Mais dans Chrome (également sous Linux):

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

Comme vous c un voir, la première zone de texte n'est pas la bonne largeur :(

Comment puis-je résoudre ce problème?

Mise à jour:here est une page en direct qui illustre le problème.

Answer 1

Aha! Maintenant que vous avez posté un lien en direct, c'est beaucoup plus clair.

Le problème est, votre textarea a un remplissage de 2px de gauche et de droite. Par conséquent, son bord droit est calculé comme 2px + 100%, ce qui évalue à "2px à droite à partir du bord droit td" (car le bord droit td est 100%).

(J'espère que cela est assez clair, je fais de mon mieux :-)

Pour résoudre ce problème, soit mis padding: 0 sur la zone de texte, ou mis padding: 0 2px sur l'entrée.