按钮高度

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，如果您不满意），并且它已显示大部分类似内容。 （像你喜欢的调整字体设置，边框，填充等小问题。）