输入提交中的不可见填充

Question

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

那么，为什么输入比简单文本占用更多的高度？

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

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

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

有一个例子可以使用 。

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

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

但是...首先，我不敢相信自己的眼睛在看什么。 内部浏览器样式表中的！重要吗？ 正常吗 这可能是答案吗？

具有相同答案的类似问题 。
但是莱尼尔（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中显示不佳。 一种快速的解决方案是用button替换input 。

更新的html将是：

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

两者之间没有真正的区别，因为您仍然可以使用按钮的单击处理程序来触发Submit事件。尽管如此，找出FireFox为何这样做会很有趣...

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