Chrome浏览器中按钮高度失真

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的默认值），并且它已经显示为大致相似。 （根据需要调整字体设置，边框，填充等小问题。）