javascript - Firefox Android 中 "input"和 "white-space:pre-wrap"的高度大于 Android 中的 Chrome

Question

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

.wrap {
  white-space: pre-wrap;
}

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

如果您在 Firefox Android(最新版本)中打开此代码，您会看到高度大于 Chrome 中的高度。


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

Answer 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。 (对你来说也可以是一个workarround!？)
此处的更多信息是用于集成隐藏元素的浏览器集成 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)。正常行为是，属性 display: inline-flex从 reset-button-container 的父元素让容器内联流动并流动到下一行。如果设置 white-space: wrap您可以在输入字段下方的下一行中看到该按钮。 (看到这似乎也是一个错误。)但是对于 pre-wrap流程不再可能，并且在该字段中按下按钮......让它长得更高。