-ms-clear在IE兼容模式下的问题

IE10+

在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号

/** 文本输入框的 X  **/input::-ms-clear{display: none;}
/** 密码输入框的 X  **/input::-ms-reveal{display: none;}

IE9-

在版本低于IE9的浏览器中,根本不存在叉号这个问题. 然而,在IE10+浏览器中,使用兼容模式, 这个叉号通过css的方式是没有消除的. 因为兼容模式根本不认识 ::-ms-clear 这个类.

那么,这种情况下要怎么做呢? 搜到一篇文章 链接地址

IE Compatibility Mode

以下内容摘录(瞎译)自 Fixing IE 10 Text Box ‘X’ and Sizing Issues | Justin Cooney

IE10以后,输入框的右侧多了一个可以清除输入的叉号。有时候大家会不小心点到这个叉号,清除了刚刚输入的大段或者复杂的文字。当文本框是右对齐的时候,误点击的几率可能会高一些。这些不起眼的操作可能会导致用户的抱怨,觉得这个输入框的特性不好用(喂,不是所有用户都是**机构的好嘛).

由于IE盒模型的关系,IE8+浏览器标准模式中文本框的宽度和高度会比怪异模式下多出来几个像素(边框和内边距)。由此导致一个问题:精心设计的网页在由标准模式和怪异模式之间切换的时候,网页布局可能会错乱。 box-sizing参考资料、IE盒模型缺陷

回归正题,本文解决了以下问题:

  1. 理解在什么情况下叉号会出现

  2. 在IE中怎么隐藏叉号

  3. 如何给文本框设置一个合适的尺寸

  4. 叉号在什么情况下会出现?

虽然不愿意,但我还是要说“这要看情况”。主要看两点:
文本框里的文本长度
IE兼容模式的文档模式版本
前面说过,IE浏览器怪异模式下文本框的宽度会比在IE8+浏览器中展现的宽度小。然而问题是,即使你在IE10中设置了文档模式为怪异模式,使得文本框宽度变小了,这个叉号仍然可能会出现。

Under:

在兼容IE8文档模式下

如果一段文本很短,比如10个字母以内,这段文本在浏览器的表现如下:

  • 宽度为81px或82px的时候,文本框将会显示一个空白的方块,但是没有叉号

  • 宽度为80px的时候,既没有方块也没有叉号显示

  • 宽度大于等于83px,这个差号就会显示出来

如果这段文本的长度大于文本框的长度,那么在浏览器的表现如下:

  • 宽度小于等于82px的时候,叉号不显示, 即使是空的也没问题

  • 宽度大于82px的时候,叉号就显示

在 兼容IE5文档模式下
即使使用meta标签,告诉浏览器使用怪异模式,浏览器依然会显示叉号
如果一段文本很短,比如10个字母以内,这段文本在浏览器的表现如下:

  • 宽度为84px或85px的时候,文本框将会显示一个空白的方块,但是没有叉号

  • 宽度为83px的时候,既没有方块也没有叉号显示

  • 宽度大于等于86px,这个差号就会显示出来

如果这段文本的长度大于文本框的长度,那么在浏览器的表现如下:

  • 宽度小于等于85px的时候,叉号不显示, 即使是空的也没问题

  • 宽度大于86px的时候,叉号就显示

如何在IE中隐藏文本框里的叉号呢?

    input[type=text]::-ms-clear{
        display: none;
    }

使用如上css代码, 叉号就会被隐藏.实际上,可以修改大量的属性,达到隐藏叉号的目的.比如背景颜色位置等等.

如何跨浏览器给文本框设置一个预期的的合适长度

    box-sizing: border-box:;
    -moz-bo-sizing: border-box:;
-webkit-box-sizing: border-box:;

这段css代码会将计算盒模型的方法统一成 "border-box",这样一来宽度和高度的计算方式就是一致的.

Example

在下面这个例子中,你可以从兼容模式 IE5 一直到 IE9, 验证上面说到的几点.









    Enter some numbers:

下面这个例子是一个解决方案.在标准模式下, 叉号会被隐藏.






jQuery UI Dialog - Basic modal



    Enter some numbers:

添加新评论