我的按钮高于 Firefox 中的输入字段？答案

【问题标题】：My button is higher then input fields in firefox?我的按钮高于 Firefox 中的输入字段？
【发布时间】：2014-09-24 14:10:57
【问题描述】：

这是我的 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;
}

这是 chrome 的输出：

在 Firefox 中：

如您所见，我的过滤器按钮高于 Firefox 中的输入字段。

我该如何解决这个问题。

【问题讨论】：

你能给我们你的.css
只是使用了默认的bootsrap css:maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
我正在使用引导程序

标签： html css forms twitter-bootstrap firefox

【解决方案1】：

我认为这与按钮的 display-inline 块有关。这最终在两种浏览器中都有效：

<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/

您显然可以将 display:block 移出内联样式，只是揭示它为什么不适合您。

【讨论】：