css - Arch Linux 上的 Firefox 输入忽略高度

Question

我不确定这是否只发生在我身上，还是 Arch Linux 上 Firefox 的一个错误。如果我在 Arch Linux 上使用 Firefox 打开以下链接，它会发出警报 32 。它警报18在 Windows 10 上使用 Firefox 打开时。

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。您必须覆盖输入的默认边框才能使其在 32 像素以下工作。

设置边框和边框半径以使其看起来美观。

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>