火狐Android中带有“空格:预包装”的“输入”的高度大于Android中的Chrome。
请查看此bug的以下简化版本：
.wrap {
white-space: pre-wrap;
}<div>
<input type="date" class="wrap">
</div>
如果你打开这段代码--火狐Android (最新版本)，你会发现它的高度比Chrome大。
问题在于“空格:预包装”。我不知道为什么它会让高度变大。有人能给我解释一下可能的解决方案或者替代方案吗。顺便说一下，我不想为我的输入设置一个固定的高度。
回答 3
Stack Overflow用户
发布于 2021-03-13 15:40:12
看起来你在Firefox中发现了一个有趣的bug。
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，让“grow”将按钮包装元素重置为给定的高度。如果您现在将浏览器集成样式中的display: none (在火狐中直接添加)添加到该元素中，则input的行为将被移除，并且input的大小将回到正常状态。
因此，- white-space: pre-wrap会更改字段的行为，并保留空白序列的位置(更详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)。正常的行为是，属性display: inline-flex从重置按钮容器的父元素允许容器内部流并流到下一行。如果设置white-space: wrap，则可以在输入字段下方的下一行中看到按钮。(看到这似乎也是一种缺陷。)但是有了pre-wrap，流就不再可能了，而且在现场按下按钮.让它长得更高。
Stack Overflow用户
发布于 2021-03-12 21:02:42
使用white-space: pre-wrap时，Safari保留空白序列。
最简单的解决办法是：
.wrap {
white-space: none;
white-space: -moz-none;
}我建议你检查一下CSS-戏法。
Stack Overflow用户
发布于 2021-12-08 17:30:32
<div> <--linebreak
>whitespace<.innerHTML <-- linebreak
</div>这些换行符和空格确实使您的元素具有扩展性，因为您已经在.innerHTML中使用{空格: pre;}保存它们。
<div>.innerHTML</div>
-or-
elem.innerHTML = elem.innerHTML.trim()用修复元素的问题
然而，
<input type="date" id="wrap" value='2021-12-06'>没有.innerHTML，也没有结束标记。它的值没有空格。
元素的显示内容(未反映在检查器中)由{max-高度:20 max}规则裁剪。
我已经寻找了一种访问此标记的显示内容的方法，但是找不到。我建议不要使用默认的输入标记，而是使用js解决方案。众所周知，默认输入字段很难在设备之间进行预测和样式化。
https://stackoverflow.com/questions/64331670
复制相似问题
腾讯云开发者
