如何在兼容模式下从 IE10 文本框中删除清除按钮(“X”按钮)?

Posted

技术标签:

【中文标题】如何在兼容模式下从 IE10 文本框中删除清除按钮(“X”按钮)?【英文标题】:How to remove clear button ( 'X' button ) from IE10 textboxes in compatibility mode? 【发布时间】: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”。

【问题讨论】:

类似于***.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 等插件, 【参考方案1】:

我终于设法解决了这个问题。显然,如果您将 heightline-height 设置为 0 并将 padding-toppadding-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 我找到了解决方案(至少它对我有用)。我会尽快发布。

以上是关于如何在兼容模式下从 IE10 文本框中删除清除按钮(“X”按钮)?的主要内容,如果未能解决你的问题,请参考以下文章

删除某些输入上 IE10 的“清除字段”X 按钮?

javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

如何禁用 IE9 中的兼容模式按钮?

去除IE10自带的清除按钮

如何使搜狗浏览器兼容模式使用IE10内核

jquery 一个按钮点击,复制文本内容