css - 为什么 Firefox 在链接 和 <input type=submit> 上以不同方式显示相同的 CSS？

Question

遇到一个奇怪的问题...

这是我的按钮 css:

a.cta-btn-green { 
    color:#fff !important; 
    font-size:14px !important; 
    font-weight:bold; 
    text-shadow: #060 1px 1px 1px; 
    background-color:#329122; 
    padding:5px 10px;
    -moz-border-radius:14px; 
    -webkit-border-radius:14px; 
    text-decoration:none;
    float:right;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    cursor:pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
}


input.cta-btn-green { 
    color:#fff !important; 
    font-size:14px !important; 
    font-weight:bold; 
    text-shadow: #060 1px 1px 1px; 
    background-color:#329122; 
    padding:5px 10px;
    -moz-border-radius:14px; 
    -webkit-border-radius:14px; 
    text-decoration:none;
    float:right;
    border:0;
    font-family:Arial, Helvetica, sans-serif;
    cursor:pointer;
    background: -moz-linear-gradient(100% 100% 90deg, #307d23, #4ac236); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4ac236), to(#307d23));
} 

两个 CSS 类相同，但有一个应用于 <a>另一个应用于<input type="submit" /> ...效果是 Firefox 给出了 input.cta-btn-green高度大于 a.cta-btn-green ？

谁能告诉我哪里出错了？

谢谢

Answer 1

如果你告诉你的 a 和 input 到 display:block 那么你将能够设置特定的高度，从而使它们相同.

因此将以下行添加到两条规则中:

display:block;
height:20px; /*adjust this as needed*/