html - Firefoxでお問い合わせフォームの表示が異なるのはなぜですか？

Question

クロームで見栄えのするフォームを作成しました

しかし、私は今よりもFirefoxにチェックしますが、何度も試してみても適切に表示されますが、解決策は見つかりません

私のフォームのいずれか1つの修正

Chromeの結果

そしてFirefoxの結果ショーは

デモリンクは

Answer 1

inputはReplacing要素であり、クロスブラウザ機能のために高さと幅を定義する必要があります。

これをチェックしてくださいhttp://tinkerbin.com/hwxXoCkj

Answer 2

入力用の固定幅/高さはありません。ここで更新されたデモを確認してください

http://jsfiddle.net/Sxvdh/1/

Answer 3

私は個人的にこのようなフォームのスタイルを設定していました（あなたがすべきだと言っているのではなく、単に代替案を提供しているだけです）。

http://jsfiddle.net/qZfdp/2/

<form action="" method="post">
    <div class="field text">
        <label>Name *</label>
        <input type="text" name="name" />
    </div>
    ...
    <div class="field textarea">
        <label>Message</label>
        <textarea name="message"></textarea>
    </div>
    <button>Submit</button>
</form>

CSS：

form {
    margin: 25px;
    width: 592px;
    border: solid 3px #c7d9e0;
    padding: 60px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-shadow:0 0 10px 0 rgba(0,0,0,0.6);
    -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.6);
    -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.6);
    border-radius:5px;
}

label {
    width: 100px;
    display: inline-block;
    float: left;
}

input,
textarea {
    border: 0 none;
    background-color: transparent;
    width: 335px;
}

.field {
    margin: 0 0 10px 0;
    padding: 10px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.75) inset;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:solid 1px #d8d5d5;
    background: -moz-linear-gradient(top,  rgba(247,245,245,1) 28%, rgba(216,213,213,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  rgba(247,245,245,1) 28%,rgba(216,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(247,245,245,1) 28%,rgba(216,213,213,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(247,245,245,1) 28%,rgba(216,213,213,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(247,245,245,1) 28%,rgba(216,213,213,1) 100%); /* W3C */
}
​
​