css - 如何在兼容模式下从 IE10 文本框中删除清除按钮( 'X' 按钮)？

Question

目前我在一个网站上工作，该网站使用元标记在 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”。

Answer 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。