输入提交中的隐形填充

我有两个框。第一个包含简单的文字。第二个包含一个没有边框，填充，边距的提交输入。输入提交中的隐形填充

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

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

我试图玩line-height和vertical-align属性，没有成功。

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

有一个example to play with it。

编辑：我最近看到的，这个问题只有用Firefox ...

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

enter image description here

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

Similar question with the same answer。
但诀窍Leniel建议不适合我...

来源

2013-08-21 Arkana

奇怪的行为。它在Chrome和IE中显示正常，但不是FF ... – lukeocom

它似乎不是行高，因为它也会在左右两侧创建空间，这不会是行高。 – Michael

额外的填充是在您的.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-21 15:49:07 Michael

谢谢，但正如我所说，“我知道我可以玩填充”，我的问题是为什么在第二个框中有更多的填充。 “buttonarrownext”中的填充是相同的......但第二个填充更高，甚至删除了填充（在FF中）。 – Arkana

@Arkana我明白你的意思了......我完全误解了你的问题。也就是说，我找不到任何文档，但似乎firefox会应用默认的填充量来填充无法重置的元素。这是我唯一的结论 – Michael

正如我的评论所述，它在IE和Chrome中显示正常，但不是FF。一个快速解决方案是用button替换input。

更新的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-22 06:31:26 lukeocom

我不知道我们是否可以更改标记（我们使用JSF Primefaces来完成），但这是一个很好的解决方案。如果只有我可以找出为什么会发生这种情况...谢谢所有:) – Arkana

另一个部分修复是为div.buttonarrownext设置固定高度，但是这引入了另一个问题，即文本不是垂直居中 - http：// jsfiddle.net/QfPGW/3/和固定的文本对齐方式 - http://jsfiddle.net/QfPGW/4/ – lukeocom

是的，它“削减”底部的字母:(Firefox ...我相信你.. 。tu quoque，fili mi .... :( – Arkana

输入提交中的隐形填充

回答

相关问题