logo标签列表

IE 10的-ms-clear伪元素以及IE5怪异模式

cssinternet-explorer-10quirks-mode
6

我正在处理一个老的Web应用程序，需要使用Internet Explorer的“IE5 Quirks模式”（使用X-UA-Compatible：IE = 5设置）。

应用程序中的许多文本字段都有（应用程序生成的）“x”按钮来清除内容。在IE10中，IE也会生成一个“x”按钮来清除字段，因此用户会看到两个“x”按钮。

如此问题所讨论的，您可以使用::-ms-clear CSS伪元素删除IE生成的“x”。不幸的是，在IE5 Quirks模式下，这似乎无效： ::-ms-clear 伪元素的样式显示为:unknown，并且IE生成的“x”仍然出现。

除了重写应用程序以使用现代浏览器模式之外，还有没有其他方法可以摆脱IE生成的“x”？

以下是在IE10下运行IE5 Quirks模式时重现问题的测试页面：

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=5">
        <style type="text/css">
            ::-ms-clear { width: 0; height: 0; }
        </style>
    </head>
    <body>Enter some text:<input></body>
</html>
必须使用应用程序生成的按钮吗？它们提供了IE10生成的按钮没有的某些功能吗？因为在这种情况下，我认为不可能删除IE10生成的按钮。 - BoltClock
应用程序生成的“x”按钮确实提供了一些其他功能，但看起来我们最好的解决方法是有条件地在IE10中删除它们，并找到另一种触发相同功能的方式... - Aron
1
肯定不可能还有什么需要使用怪异模式的东西了吧？？？过去在怪异模式下阻碍人们的唯一问题是盒模型与标准模式非常不同，这使得转换工作太繁琐，但现在你可以只需使用 * {box-sizing:border-box;}，标准模式就会切换到使用旧的怪异模式盒模型而不会出现问题。除此之外，在怪异模式下还有什么阻止您摆脱它的因素——也许我们可以帮助您解决这个问题，而不是试图帮助您继续生活在上世纪90年代。 - Spudley
我很想升级应用程序以适用于现代浏览器，但它足够大，仅测试工作就需要相当大的努力。正在进行一次完全现代化整个堆栈的重写，但是旧的版本必须继续工作一段时间！不过，感谢您提供 box-sizing 属性的提示 - 我之前并不熟悉。 - Aron
哦，天啊...我正在使用SharePoint 2010工作，它强制使用IE8渲染。我也遇到了这个问题。很糟糕，因为你不能利用最新的功能而被迫使用过时的技术。对我们来说，浏览器检查并不是过去的事情。 - harsimranb
1个回答
3

尝试

input::-ms-clear { display: none; }

或者

input::-ms-clear { visibility: hidden; }

一个更加hack的解决方法可能是使用margin-right和overflow属性。
input { margin-right: -20px; overflow: hidden }
3
::-ms-clear根本没有被识别，因此这样做毫无作用。 - BoltClock
实际上，::-ms-clear根本没有被识别出来，不幸的是，“hacky”选项也无法解决问题。 - Aron
1
当然它不会被识别。这就是怪异模式的全部意义——怪异模式具有IE5版本的CSS；它从浏览器中删除了所有比那更新的CSS功能。 - Spudley
@Aron - Aron，你能否使用CSS来隐藏应用程序生成的清除按钮，而不是IE10生成的按钮？ - Louis Ricci
@Spudley 我明白，但由于浏览器在IE5模式下使用IE10功能，我正在尝试找到一种方法告诉它停止这样做。 - Aron
@Aron - 我明白你想做什么。我想说的是，我怀疑在 quirks 模式下还没有办法实现它。IE10 在 quirks 模式下渲染其内置的清除小工具的事实是不幸的；鉴于 quirks 模式应该是 IE5 的模拟，它可能不应该这样做，但我可以理解 IE 开发人员将其留在那里的原因。 - Spudley
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接