1

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

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

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

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

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

有一个例子可以玩它。

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

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

在此处输入图像描述

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

类似的问题，同样的答案。
但是莱尼尔建议的技巧对我不起作用......

4

2 回答 2

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来演示。

于 2013-08-21T15:49:07.477 回答
1

正如我的评论中提到的，它在 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/

于 2013-08-22T06:31:26.243 回答