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

Question

我创建了一个形式，它的优良的外观镀铬

但我检查到Firefox比现在表现出正确的我尝试很多次，但没有找出解决方案

任何一个修正我的形式

铬导致

和Firefox结果表明是

Demo link is

Answer 1

输入是Replacing元件然后必须定义高度 & 宽度到它的跨浏览器能力。

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