我的按钮比firefox中的输入字段高吗？

Question

这是我的html表单：

<form novalidate class="simple-form">
    <label>Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /></label>
    <label>Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum" /></label>
    <label>Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum" /></label>
    <label><button class="btn btn-primary" ng-click="updateNumArray(revNum, minNum, maxNum); updateActiveRow()">Filter</button></label>
</form>

在这里我的css

simple-form label{
    margin-left: 10px;
}

input {
    width: 150px !important;
}

以下是一个以铬表示的输出：

​

​

在firefox中：

​

​

如您所见，我的filter按钮比firefox中的输入字段要高。

我怎么能解决这个问题。

Answer 1

我认为这与按钮的显示内嵌块有关。这在这两种浏览器中都可以使用：

<form novalidate class="simple-form">
    <label>Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /></label>
    <label>Min Price: <input type="number" ng-init="minNum=0" class="form-control" min="0" step="1000" ng-model="minNum" /></label>
    <label>Max Price: <input type="number" ng-init="maxNum=0" class="form-control" min="0" step="1000" ng-model="maxNum" /></label>
    <label>&nbsp;<button class="btn btn-primary" style="display:block;" ng-click="updateNumArray(revNum, minNum, maxNum); updateActiveRow()">Filter</button></label>
</form>

http://jsfiddle.net/yjpr6pLm/1/

很明显，您可以将显示:从内联样式中删除，只是暴露了为什么它不适合您。