按鈕高度

Question

我的按鈕在Firefox

似乎不錯，但高度在Chrome扭曲

這裏是我的代碼

HTML

<input name="Submit" type="image" onclick="return CheckForm1();" class="button submit" /> 

CSS

.button { 
    color: #fff; 
    display: inline-block; 
    line-height: normal; 
    margin-bottom: 20px; 
    text-align:center; 
    text-decoration: none; 
} 
.button:hover { 
    background-color: #fff; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
} 

.submit { 
    background-color: #1ea1e3; 
    border: #1ea1e3 3px solid; 
    color: #fff; 
    font-size: 20px; 
    padding: 10px 0; 
    width: 300px; 
    max-width: 100%; 
} 
.submit:hover { 
    border: #1ea1e3 3px solid; 
    color: #1ea1e3; 
} 

是的，我做了明確的緩存。

測試頁面是here。

Answer 1

<input name="Submit" type="image" onclick="return CheckForm1();" class="button submit" />

你爲什麼要使用type="image"在這裏？如果沒有通過src屬性實際引用圖像，這又會產生什麼意義？

將其更改爲type="submit"（並且更改您的瀏覽器可能使用的默認值value，如果您不滿意），並且它已顯示大部分類似內容。 （像你喜歡的調整字體設置，邊框，填充等小問題。）