css - CSS：一貫性のない入力タグの外観（FirefoxとSafari）

Question

FirefoxとSafariで入力タグがかなり不均一に見える理由を理解しようとしています。このスクリーンショットを見てください。

FirebugとSafari開発ツールを使用して、何が起こっているのかを把握しました。Firefoxは各境界線にさらに1ピクセルを追加しているようです。これにより、入力が大きくなり、煩わしく見えるようになります。さらに、テキストはFirefoxでは少し高いように見えます。余分なピクセルが原因ですか？または、他の何か？

とにかく、Firefoxでこれらのピクセルが追加される理由についていくつかの指針を入手したいと思います。

#signup-form form input[type="text"], input[type="password"] {
    height:20px;
    padding:2px 4px;
    width:300px;
    color:#a1a1a1;
    font-style:italic;
    display:block;
    margin:10px 0px 0px 0px
}

Answer 1

セットborder-width: 2px;。要素のレンダリングはブラウザやオペレーティングシステムによって異なります。これは、Web開発者が対応しなければならないものです。フォーム要素は、他の要素よりもこの影響を受けやすくなっています。