firefox中输入字段之间的奇怪差距

Question

我正在尝试制作一个小键盘按钮。这是小提琴代码：numpad

如果你在firefox中打开它，你可能会发现有两个垂直间隙（例如1到2之间）

我想消除这两个差距，但不知道它们来自Firefox。

如何解决？

以下是我的HTML代码：

     <div style="width: 755px; margin: 0 auto; ">
    <div class="button-pad">
            <input type="button" value="1" onclick="" />
            <input type="button" value="2" onclick="" />
            <input type="button" value="3" onclick="" />
        </div>
        <div class="button-pad">
            <input type="button" value="4" onclick="" />
            <input type="button" value="5" onclick="" />
            <input type="button" value="6" onclick="" />
        </div>
        <div class="button-pad">
            <input type="button" value="7" onclick="" />
            <input type="button" value="8" onclick="" />
            <input type="button" value="9" onclick="" />
        </div>
        <div class="button-pad">
            <input type="button" value="" />
            <input type="button" value="0" onclick="" />
            <input type="button" value="" onclick="" style="background-image:url(./img/clear.jpg);background-repeat:no-repeat;background-position:center"/>
        </div>
    </div>

这是我的CSS：

.button-pad > input{
background-color: #EAEAEA;
border: 1px solid #666666;
color: #000000;
font-size: 40px;
font-weight: bold;
padding: 15px;
width: 15%;

}

Answer 1

内联元素对空白区域很敏感，因此您需要摆脱输入元素之间的空间：

<input type="button" value="1" onclick="" /><input type="button" value="2" onclick="" /><input type="button" value="3" onclick="" />

此外，如果您希望所有按钮彼此直接相邻，请将CSS更改为：

.button-pad > input {
    background-color: #EAEAEA;
    border: 1px solid #666666;
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    padding: 15px;
    width: 15%;
    vertical-align:top;
    margin:0;
}

<强> jsFiddle example