输入提交中的隐形填充

Question

我有两个盒子。第一个包含简单文本。第二个包含一个没有边框，填充，边距的提交输入。

那么，为什么输入比简单文本更高？

我知道我可以使用填充并删除框高度，但出于我的目的，我需要将其设置为静态高度，并准备此框以便可以重复使用输入和简单文本。

我尝试使用line-height和vertical-align属性，但没有成功。

造成额外line-height的原因是什么？

有example to play with it。

编辑：我最近看到，问题仅出在Firefox ...

我认为它可能适用于Firefox CSS中的line-height属性：

但是......首先，我无法相信我的眼睛所看到的。在内部浏览器样式表中是否很重要？那是正常的吗？这可能是一个可能的答案吗？

Similar question with the same answer。
但是Leniel建议的伎俩对我不起作用......

Answer 1

额外的填充位于.buttonarrownext类。

修正了CSS类：

.buttonarrownext {
    cursor:pointer; 
    position:relative; 
    border-radius:4px; 
    text-align:center; 
    background:white; 
    border:1px solid red; 
    padding: 0px; /* changed the padding here */
    margin:0px auto; 
    display:inline-block;
}

要展示JSFiddle。

Answer 2

正如我在评论中提到的，它在IE和Chrome中显示得很好，但不是FF。快速解决方案是将input替换为button。

更新的html将是：

<div class="container"> 
  <div class="buttonarrownext">Siguiente</div>
  <div class="buttonarrownext"><button class="reset">Siguiente</button></div>
    </div> 

没有真正的区别，因为您仍然可以使用按钮的单击处理程序触发提交事件... 有趣的是找出为什么FireFox会这样做......

更新了小提琴 - http://jsfiddle.net/QfPGW/2/