为什么这个div与输入的高度不同？ （在Firefox中）

Question

我创建了一个div和输入，并给出了完全相同的边框，填充，边距，字体和字体大小。但他们的身高仍然不一样。为什么呢？

编辑：使用Firefox

示例：http://jsfiddle.net/a8n6qxaz/

HTML：

<div class="close">X</div>
<input type="submit" value="TEST" />

CSS：

    input[type="submit"]
    {
      position: relative;
      margin-right: .5em;
      float: right;
      margin: 0em;
      padding: 0.125em;
      padding-left: .25em;
      padding-right: .25em;
      font-family: Arial, Helvetica;
      font-size: 1.25em;
      line-height: 1em;
      color: #ffffff;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      background-color: red;
      -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      display: block;
      cursor: pointer;
    }

    .close
    {
      position: relative;
      margin-right: .5em;
      float: right;
      margin: 0em;
      padding: 0.125em;
      padding-left: .25em;
      padding-right: .25em;
      font-family: Arial, Helvetica;
      font-size: 1.25em;
      line-height: 1em;
      color: red;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      background-color: #3e3f39;
      -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      display: block;
      cursor: pointer;
    }

Answer 1

问题是你没有指定任何高度，所以请使用例如

height: 1em;

但是，默认情况下，使用边框框模型考虑输入的高度，使用内容框模型考虑div的高度。使用box-sizing属性为两个元素指定相同的模型：

box-sizing: content-box;

＆＃13;

＆＃13;

input[type="submit"], .close {
  position: relative;
  margin-right: .5em;
  float: right;
  margin: 0em;
  padding: 0.125em;
  padding-left: .25em;
  padding-right: .25em;
  font-family: Arial, Helvetica;
  font-size: 1.25em;
  line-height: 1em;
  color: #ffffff;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  background-color: red;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  display: block;
  cursor: pointer;
  height: 1em;
  box-sizing: content-box;
}

＆＃13;

<div class="close">TEST</div>
<input type="submit" value="TEST" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

出于某种原因，在Firefox中，填充在输入中的应用与div 的应用不同，即使它们都是display: block并且您删除了输入的appearance 。 line-height也会在输入中混乱。

从输入中移除顶部/底部填充和行高，允许使它们具有相同的高度：

http://jsfiddle.net/a8n6qxaz/4/

    input[type="submit"]
    {
      position: relative;
      margin-right: .5em;
      float: right;
      margin: 0em;
      height: 1.5em;
      padding: 0em;
      font-family: Arial, Helvetica;
      font-size: 1.25em;
      color: #ffffff;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      background-color: red;
      vertical-align: middle;
      -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      display: block;
      cursor: pointer;
    }

    .close
    {
      position: relative;
      margin-right: .5em;
      float: right;
      margin: 0em;
      height: 1.5em;
      padding: 0em;
      font-family: Arial, Helvetica;
      font-size: 1.25em;
      line-height: 1.5em;
      color: #ffffff;
      appearance: none;
      box-shadow: none;
      border-radius: none;
      border: none;
      background-color: red;
      -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
      display: block;
      cursor: pointer;
    }

Answer 3

因为你没有指定height，所以firefox对height和div使用不同的默认input而不是chrome

Answer 4

如果您想强制input的行为与div相同，则必须更改input的框模型：

box-sizing: content-box;

将该CSS属性添加到input，然后在Firefox中，div和input将以相同的方式考虑padding。