为什么我的联系表单在firefox中显示不同？

Question

我在chrome中创建了一个很好看的表单

但我检查火狐比现在显示正确我多次尝试但没找到解决方案

任何一次更正我的表格

Chrome结果

和firefox结果显示是

Demo link is

Answer 1

输入是Replacing元素，然后您必须定义 height ＆amp;对于跨浏览器功能，宽度。

选中此http://tinkerbin.com/hwxXoCkj

Answer 2

您没有固定宽度/高度进行输入。查看更新后的demo here

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 */
}
​
​