html - 为什么我的联系表格在 Firefox 中显示不同？

Question

我创建了一个表单，它在 chrome 中看起来很好

但是我检查到 Firefox 比现在正确显示我尝试了很多次但没有找到解决方案

任何人更正我的表格

铬结果

和 Firefox 结果显示是

演示链接是

Answer 1

input is the Replacing element then you have to define height & width to it for the cross browser capability.

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