如何在兼容模式下从 IE10 文本框中删除清除按钮（“X”按钮）？答案

【问题标题】：How to remove clear button ( 'X' button ) from IE10 textboxes in compatibility mode?如何在兼容模式下从 IE10 文本框中删除清除按钮（“X”按钮）？
【发布时间】：2013-12-02 19:28:33
【问题描述】：

目前我正在开发一个使用元标记以 IE9 模式呈现页面的网站 [BrowserMode: IE10, DocMode: IE9 Standards]

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />

在 IE10 中，页面中有很多 CSS 中断，因此使用 IE=Edge 目前不是一个可行的解决方案（将来可能会在所有 css 修复后使用，但我看不到这附近未来）。

现在，重点是所有文本框都有清除按钮。在其中一个文本框中，我们不需要那个十字（因为我们已经在文本框的右边有一个自定义 (x) 按钮）。

我尝试了::-ms-clear，但没有奏效，因为我们在 BrowserMode: IE10 和 DocMode:Standards 上工作。现在可以做些什么来删除那个“X”。

【问题讨论】：

类似于stackoverflow.com/questions/17196845/…，只是询问的是 IE5 Quirks 而不是兼容性视图。显然，::-ms-clear 在这两种模式下都不起作用。
@BoltClock 你能建议我在这里做什么吗？此外，是否有任何网站可以向 MsIE 建议功能请求，以便在 DocMode
Identical question here。同样，简短的回答是你不能这样做。这是不可能的。如果您真的想摆脱这个小部件，那么您的 only 选项是使用标准模式。如果这意味着修复损坏的 CSS 以使其正常工作，那么也许这是一件好事。
重新建议该功能：我刚刚在上面链接的问题有一个指向 MS Connect 的链接，您可以在其中提出问题。但不要指望它会在 IE10 或 IE11 中发生，因为它们已经发布，而且我看不到它们在发布后添加新功能。所以无论未来发生什么，你都必须在 IE10 和 IE11 中处理它。
我不明白，你为什么不喜欢IE10的这个功能。同样，IE10 中的选择标签也有question。在我看来，这真的很好，否则你可以使用 bootstrap 等插件，

标签： css internet-explorer internet-explorer-10

【解决方案1】：

我终于设法解决了这个问题。显然，如果您将 height 和 line-height 设置为 0 并将 padding-top 和 padding-bottom 设置为文本框高度的一半，那么这个很棒的 'X' 将不再显示。至少这对我有用。

这是代码笔： http://codepen.io/rjuyal/pen/iGKnI

代码摘录

.gen{
                margin: 10px;
                margin-top: 40px;

                box-shadow: inset 1px 2p 0 rgba(200, 100,10, 0.2 );
                font-size: 16px;

                width: 400px;
                line-height: 18px;
                height:  41px;
                fint-family: 'Lucida Grande' , 'Arial';
                vertical-align: middle;
            }

            .ie10f{
                height: 0px !important;
                line-height: 0px !important;
                padding-top: 22px !important;
                padding-bottom: 22px !important;
            }

您将看到两个文本框，一个带有 X，另一个没有它。最好的部分是，这也隐藏了 IE10 中的 X（无兼容模式）。

附：您必须从开发人员工具中手动将 DocMode 更改为 IE9。

【讨论】：

由于某种原因使用 IE9 模式它不起作用，而在 IE8 上它可以工作，但它看起来很奇怪。我真正需要的是设置 height:0;填充：10px；足以让我让它看起来和“x”一样（只是没有显示“x”）。感谢您帮助探索替代解决方案。

【解决方案2】：

很抱歉成为坏消息的承担者，但这是不可能的。

如果您想摆脱关闭小部件，您的唯一选项是切换到标准模式。

在 IE10 中，页面中有很多 CSS 中断，因此使用 IE=Edge 目前不是一个可行的解决方案（将来可能会在所有 css 修复后使用，但我看不到这附近未来）。

所以我想这归结为您想摆脱X 小部件的程度。如果它让您感到困扰，那么您将不得不咬紧牙关，修复您的 CSS，然后切换到标准模式。

否则，你就只能活下去了。

对不起。

【讨论】：

很抱歉成为坏消息的承担者，多么戏剧性 ;) +1
我对关闭另一个问题作为这个问题的欺骗感到不安，因为它们相差不到一天。你为什么不投票关闭？
谢谢，我找到了这个：connect.microsoft.com/IE/feedback/details/783743/… Microsoft 说这是设计使然。
@BoltClock - 我无法投票支持 dup，因为其他问题都没有得到接受的答案。否则我会做的。
@BoltClock 我找到了解决方案（至少它对我有用）。我会尽快发布。