如何为相同的班级获得相同的按钮和href大小？

Question

我在html中有这样简单的形式：

<form action="add" method="get">
    <input name="ok" type="submit" value="ok" class="btn" />
    <a class="btn" href="ok">ef</a>
</form>

而且我有这样的CSS：

.btn {
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 -1px rgba(127, 127, 127, 0.5);
  text-decoration: none;
  line-height: normal;
  text-align: center;

  cursor: pointer;
  display: inline-block;
  /*padding: 5px 12px;*/
  color: #fff;
  border-bottom: 1px solid #EEE;
  outline: none;
  border: none;

  background-repeat: no-repeat;
  background: -o-linear-gradient(top,  #3BA5C8,  #2A829E); 
  background: -moz-linear-gradient(top,  #3BA5C8,  #2A829E);  
  background: -webkit-linear-gradient(left top, left bottom, #3BA5C8, #2A829E);   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3BA5C8', endColorstr='#2A829E');
  }

但是怎么了 在firefox中，即7 a得到以下信息：a和输入（提交）的高度不同，sumbit较大，a较小。 请帮帮我。

参见http://jsfiddle.net/TxQpN/14/可以使用FF，但不能在IE7中使用

Answer 1

您必须像这样定义<a>和button高度：

.btn{
 height:30px;
 vertical-align:top;
}