Question

我不确定它是否只发生在我身上，或者它是Arch Linux上的Firefox的错误。如果我在Arch Linux上打开Firefox的关注链接，它会发出警告32。在Windows 10上使用Firefox打开时，它会发出18警报。

https://jsfiddle.net/jd6088wa/28/

浏览器和操作系统版本：

Firefox Quantum 58.0.2 (64-bit)上的

Linux archlinux 4.15.8-1-ARCH #1 SMP PREEMPT Sat Mar 10 00:00:33 UTC 2018 x86_64 GNU/Linux（提醒：32）

Firefox Quantum 58.0.2 (64-bit)上的

Windows 10 Version 1709 (OS Build 16299.248)（提醒：18）

它会警告18所有其他浏览器和操作系统。

HTML

<div class="wrapper">
  <input type="text" id='input0'>
</div>

CSS

.wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid red;
}

input {
  box-sizing: border-box;
  height: 24px;
}

使用Javascript：

const $input0 = $('#input0');
alert($input0.height());

Answer 1

原生输入边框使得高度不到32px。您必须覆盖输入的默认边框才能使其在32px以下工作。

设置边框以及border-radius以使其看起来不错。

input {
  box-sizing: border-box;
  height: 24px;
  line-height: 18px;
  padding: 2px;
  border: 1px solid gray;
  border-radius: 2px;
}

工作代码段

const $input0 = $('#input0');
alert($input0.height());

input {
  box-sizing: border-box;
  height: 24px;
  line-height: 18px;
  padding: 2px;
  border: 1px solid gray;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <input type="text" id='input0'>
</div>

Answer 2

Firefox并没有忽略高度，而是由盒子大小调整引起的：border-box

根据Firefox

content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度将添加到最终渲染宽度。

当然输入有一个浏览器添加的其他样式（边框，填充..），当使用box-sizing时会改变给定的高度：border-box

关于浏览器之间的区别，每个浏览器都有它的输入样式，因此这个浏览器样式随着屏幕大小（边框宽度和填充）而变化，高度也不会相同对于archlinux和windows中的firefox，它没有使用相同的syle

解决您可以覆盖浏览器样式

input {
  box-sizing: border-box;
  height: 24px;
  border:2px;
  padding:2px
}

Firefox输入忽略了Arch Linux上的高度

2 个答案: