css – 如何在兼容模式下从IE10文本框中删除清除按钮(‘X’按钮)?

前端之家收集整理的这篇文章主要介绍了css – 如何在兼容模式下从IE10文本框中删除清除按钮(‘X’按钮)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我正在使用一个使用元标记来在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’.

解决方法

我终于设法解决了这个问题.显然,如果将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;
            }

你会看到两个文本框,一个与另一个没有它.
最好的部分是,这隐藏在IE10中的X(没有兼容性模式).

附:您将不得不从开发人员工具手动将DocMode更改为IE9.

原文链接:https://www.f2er.com/css/214010.html

猜你在找的CSS相关文章