Firefox 输入忽略 Arch Linux 上的高度

Posted 2023-03-05

【中文标题】Firefox 输入忽略 Arch Linux 上的高度

【英文标题】：Firefox input ignores height on Arch Linux

【发布时间】：2018-08-20 06:05:34

【问题描述】：

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

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

浏览器和操作系统版本：

Firefox Quantum 58.0.2 (64-bit) on 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) on 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());

【参考方案1】：

Firefox 没有忽略高度，但这是由 box-sizing:border-box 引起的

根据火狐

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

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

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

解决可以覆盖浏览器样式的问题

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

【讨论】：

你确定是 12，而不是 32？

能否详细说明取决于屏幕尺寸？

【参考方案2】：

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