当输入宽度低于某个值时，IE10 html 输入清除按钮被隐藏答案

【问题标题】：IE10 html input clear button is hidden when input width is below certain value当输入宽度低于某个值时，IE10 html 输入清除按钮被隐藏
【发布时间】：2015-03-11 14:17:26
【问题描述】：

我在 IE10 中遇到了 html 输入控件的问题。每当我将输入的宽度设置为低于 87px 时，将不再显示清除按钮。

87 像素：

86 像素：

控制 CSS：

float: right;
color: rgb(87,97,112);
height: 23px;
box-shadow: inset 1px 1px 2px #ddd8dc;
margin-bottom: 5px;
font-family: Verdana;        
width: 86px;
padding: 0px 0px 5px 5px;

关于导致此问题的原因有什么想法吗？有什么解决方法吗？

【问题讨论】：

通常人们想隐藏清除按钮:)。无论如何，它实际上是一个pseudo-element。将width: 12px 设置为伪元素似乎会显示一个小的清除按钮，但如果您增大大小，按钮就会消失。看看上面墨迹的 MSDN 页面，并使用一些 CSS 属性，你可能会得到按钮。

标签： html internet-explorer input internet-explorer-10

【解决方案1】：

我假设您使用的是 HTML5

<input type="search" />

它是填充、字体大小和可能的其他度量（屏幕分辨率）的函数。在 IE11 上，使用你的 CSS，我的截断是 90px 宽度，89px 不显示清除按钮。

但如果我将字体大小更改为 6（小得离谱），仍然显示清除按钮的最小宽度会变小。

清除按钮占用空间。如果考虑到其他指标，框太小，IE 会牺牲它。

顺便说一句，并非所有支持 HTML5 的浏览器都支持清除按钮。

【讨论】：