爲什麼我的聯繫表單在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 */ 
} 
​ 
​