输入提交中的不可见填充

Question

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

那么，为什么输入的高度比简单的文本要高？

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

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

是什么导致了额外的line-height？

有一个example to play with it。

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

我认为可能是 Firefox CSS 中的 line-height 属性：

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

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/