text-align=left, rightのときにの入力欄の左右に1pxの余白が入る謎

HTML Webブラウザ

Google ChromeでCSSいじってたら、<input>の入力欄の左右に1pxの余白が(form, inputのmargin/border/paddingとは関係なく)入ることを見つけた。
Opera10.10とIE8はずれないが、Firefox 3.6とGoogle Chrome 4.xは1pxずれることを確認(全てWindows版)。
入力テキストがデフォルトでボーダーとくっついてると見づらいから離れてるのかな、と思ったけど、CSSをいろいろいじっても配置したdiv要素と同じ。

確認用のHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
*, body{
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}
.dummy-form, form{ width: 100%; }
.dummy-input, input{
    font-family: monospace;
    font-size: 12px;
    border: 1px solid red;
    width: 100%;
    text-align: center;
}
.left { text-align: left;  }
.right{ text-align: right; }
-->
</style>
<body>
    <!-- align = left -->
    <div class="dummy-form">
        <div class="dummy-input left">aiueoあいうえお</div>
    </div>
    <form action="#">
        <div class="dummy-input left">aiueoあいうえお</div>
    </form>
    <form action="#">
        <input class="left" type="text" value="aiueoあいうえお">
    </form>
    <!-- align = center -->
    <div class="dummy-form">
        <div class="dummy-input">aiueoあいうえお</div>
    </div>
    <form action="#">
        <div class="dummy-input">aiueoあいうえお</div>
    </form>
    <form action="#">
        <input type="text" value="aiueoあいうえお">
    </form>
    <!-- align = right -->
    <div class="dummy-form">
        <div class="dummy-input right">aiueoあいうえお</div>
    </div>
    <form action="#">
        <div class="dummy-input right">aiueoあいうえお</div>
    </form>
    <form action="#">
        <input class="right" type="text" value="aiueoあいうえお">
    </form>
</body>
</html>

参考