Firefox 输入忽略 Arch 上的高度 Linux

Question

我不确定它是只发生在我身上还是 Arch 上的 Firefox 的一个错误 Linux。如果我在 Arch Linux 上用 Firefox 打开 follow link，它会提示 32。在 Windows 10 上用 Firefox 打开时它会提醒 18。

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

浏览器和 OS 版本：

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）

它会在所有其他浏览器和 OS 的浏览器上提醒 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

Firefox 不会忽略高度，但这是由 box-sizing 引起的：border-box

根据 Firefox

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

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

关于浏览器之间的差异，每个浏览器都有自己的输入样式，因此高度不会相同，而且此浏览器样式会随着屏幕尺寸（边框宽度和填充）而变化对于 archlinux 和 windows 中的 firefox，它不使用相同的 syle

解决可以覆盖浏览器样式

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

Answer 2

原生输入边框使得高度小于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>

Firefox 输入忽略 Arch 上的高度 Linux

Firefox input ignores height on Arch Linux

css

firefox

html-input