Firefox Android 中带有“white-space:pre-wrap”的“input”高度大于 Android 中的 Chrome

Posted 2023-02-22

【中文标题】Firefox Android 中带有“white-space:pre-wrap”的“input”高度大于 Android 中的 Chrome

【英文标题】：Height of "input" with "white-space:pre-wrap" in Firefox Android is bigger than Chrome in Android

【发布时间】：2021-01-27 13:58:45

【问题描述】：

请看一下这个错误的以下简化版本：

.wrap 
  white-space: pre-wrap;

<div>
<input type="date" class="wrap">
</div>

如果您在 Firefox android（最新版本）中打开此代码，您会看到高度比 Chrome 中的要大。

问题是因为“空白：预包装”。我不知道为什么它会导致高度更大。有人可以向我解释它以及可能的解决方案或替代方案。顺便说一句，我不想​​为我的输入设置一个固定的高度。

【问题讨论】：

删除white-space: pre-wrap; 或删除padding: 0;

另外不同的浏览器有不同的风格。例如，<input type="color"> 在 Firefox 和 Chrome 中是不同的。

我需要预包装功能，我不想删除它。请给我一个替代解决方案

尝试使用box-sizing: border-box; padding: 0 !important;

不，它不起作用。还是很大！

【参考方案1】：

您似乎在 Firefox 中发现了一个有趣的错误。

A.首先是建议的（！）解决方案

简单地说：不要使用whitespace: pre-wrap 到<input type="date"> 或<input type="time">。你仍然不需要这个......显然浏览器开发人员不希望任何人这样做，因此开发人员尚未发现这种行为。

真的很难想象属性whitespace: pre-wrap 需要用于该元素的任何原因或场景。日期不会自己流到下一行。

B.背景（您要求的原因）

像date-/time-picker 这样的包含功能的元素有额外的隐藏内部元素。对于<input type="date"，通常看不到的结构如下：

<div id="input-box-wrapper" class="datetime-input-box-wrapper">
    <span id="edit-wrapper" class="datetime-input-edit-wrapper"></span>
    <button id="reset-button" class="datetime-reset-button"></button>
</div>

// you can see this normally hidden structure in Firefox using the developer tools
// when 'white-space: pre-wrap' is set to the element ...

该元素的 CSS 放置在您通常无法通过 css/js 访问/覆盖的浏览器集成样式中。尤其是在 Firefox 中这是不可能的，因为开发人员根本没有打算删除 Firefox 中的日期/时间行为的方法。

如果您不想在 Firefox 中使用浏览器集成机制，请使用文本字段并添加日期选择器扩展，即通过 jQuery。 （对你来说也可以是一个解决方法！？）

这里的更多信息是集成隐藏元素的浏览器集成 CSS：

// file: datetimebox.css
// you may have a look on them using Firefox dev tools as well

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");

.datetimebox 
  display: flex;
  /* TODO: Enable selection once bug 1455893 is fixed */
  user-select: none;


.datetime-input-box-wrapper 
  display: inline-flex;
  flex: 1;
  background-color: inherit;
  min-width: 0;
  justify-content: space-between;
  align-items: center;


.datetime-input-edit-wrapper 
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;


.datetime-edit-field 
  display: inline;
  text-align: center;
  padding: 1px 3px;
  border: 0;
  margin: 0;
  ime-mode: disabled;
  outline: none;


.datetime-edit-field:not([disabled="true"]):focus 
  background-color: Highlight;
  color: HighlightText;
  outline: none;


.datetime-edit-field[disabled="true"],
.datetime-edit-field[readonly="true"] 
  user-select: none;


.datetime-reset-button 
  color: inherit;
  fill: currentColor;
  opacity: .5;
  background-color: transparent;
  border: none;
  flex: none;
  padding-inline: 2px;


svg|svg.datetime-reset-button-svg 
  pointer-events: none;

集合在一起：

真正的问题是集成元素.datetime-reset-button。自己证明：使用white-space: pre-wrap 为input 让“增长”将按钮包装元素重置为给定的高度。如果您现在将浏览器集成样式中的 display: none（在 Firefox 直接中）添加到该元素，则 input 的行为将被删除，input 的大小将恢复为正常状态。

所以，-white-space: pre-wrap 更改了字段的行为并保留了空白序列的位置（更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space）。正常行为是，来自 reset-button-container 的父元素的属性 display: inline-flex 让容器内联流动并流动到下一行。如果您设置white-space: wrap，您可以在输入字段下方的下一行中看到该按钮。 （看到这似乎也是一个错误。）但是对于pre-wrap，流程不再可能，并且在字段中按下按钮......让它增长得更高。

【参考方案2】：

当您使用white-space: pre-wrap 时，Safari 会保留空白序列。

最简单的解决方案是：

.wrap 
  white-space: none;
  white-space: -moz-none;

我建议你检查CSS-Tricks。

【讨论】：

谢谢，我知道问题是预包装问题，但我不想删除它，因为我需要它。目前，我对 Firefox 有疑问。我没有用 Safari 测试它

Arnon，这不能回答 OP 的问题。他们正在寻找一种方法来保留空白，但不会产生奇怪的影响。

【参考方案3】：

<div> <--linebreak
>whitespace<.innerHTML <-- linebreak
</div>

这些换行符和空白确实会使您的元素伸展，因为您已使用 white-space: pre; 将它们保存在 .innerHTML 中

<div>.innerHTML</div>
-or-
elem.innerHTML = elem.innerHTML.trim()

修复了带有 标记的元素的问题>

然而，

<input type="date" id="wrap" value='2021-12-06'>

没有 .innerHTML 也没有结束标记。它的值没有空格。

元素显示的内容，不反映在inspector中，被max-height: 20px规则裁剪

我一直在寻找一种方法来访问此标签的显示内容，但找不到。我建议不要使用默认输入标签，而是使用 js 解决方案。众所周知，默认输入字段难以跨设备预测和样式化。