CSS高度不是从样式表中获取的

Question

我在css表中为特定输入字段设置了高度28px，但浏览器设置为30px（见图片）。为什么这样以及如何解决这个问题？

这是类定义：

.filter-cell > .form-control {
  border: 1px solid rgb(169, 169, 169) !important;
  height: 28px !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  padding: 2px 3px 2px 3px !important;
}

Answer 1

您的问题是box-sizing值，它考虑或不考虑元素大小的填充。尝试将box-sizing:border-box;添加到您的元素中。

阅读this以了解有关box-sizing的更多信息。

工作Demo。

P.S。要更改整个文档的box-sizing（如Bootstrap所做），请使用：

* {
  box-sizing: border-box;
}

编辑

此外，边框会增加元素的大小，因此在您的情况下，您需要根据height大小设置border：

border: 1px solid rgb(169, 169, 169) !important;
height:26px;

div {
  width:200px;
  height:28px;
  background-color:red;
  padding:1px 0;
  margin-bottom:10px;
}
.content-box {
  box-sizing:content-box;
}
.border-box {
  box-sizing:border-box;
}
.border {
  padding:0px;
  border: 1px solid #000;
}

Ispect those two divs:
<div class="content-box">

</div>

<div class="border-box">

</div>

<div class="border">

</div>