IE 10's -ms-clear pseudo-element, and IE5 quirks mode
Asked Answered
B

1

6

I'm working on a legacy web app that requires use of Internet Explorer's 'IE5 Quirks Mode' (set using X-UA-Compatible: IE=5).

A number of text fields in the app have (app-generated) 'x' buttons to clear the content. In IE10, IE also generates an 'x' button to clear the field, so the user sees two of them.

As discussed in this question, you can remove the IE-generated 'x' using the ::-ms-clear CSS pseudo-element. Unfortunately, this appears not to work in IE5 Quirks Mode: styling of the ::-ms-clear pseudo-element shows up in the developer tools as :unknown, and the IE-generated 'x' continues to appear.

Aside from rewriting the app to use a modern browser mode, is there any way to get rid of the IE-generated 'x'?

Following is a test page that reproduces the problem in IE5 Quirks Mode when run under IE10:

<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>
Bulley answered 19/6, 2013 at 16:45 Comment(5)
Must the app-generated buttons be used instead? Do they provide certain functionality that the IE10-generated ones don't? Because I don't think it's possible to remove the ones generated by IE10 in this situation.Lithuanian
The app-generated 'x' buttons do provide some other functionality, but it's looking like our best workaround is to conditionally remove them for IE10 and find another way to trigger the same functionality...Bulley
Surely there can't be anything that "requires" quirks mode any more??? The one thing that used to hold people back in quirks mode was the box model being so different to standards that it made it too much work to convert, but these days you can just use * {box-sizing:border-box;}, and standards mode will switch over to use the old quirks mode box model without complaining. what else is there in quirks mode that is stopping you from moving away from it -- perhaps we can help with that rather than trying to help you continue living in the 1990's.Hudnut
I'd love to upgrade the app to work on modern browsers, but it's large enough that the testing effort alone would be significant. A rewrite that modernizes the entire stack is in the works, but the old beast must keep working for a little while longer! Thanks for the tip on the box-sizing attribute, though - I was not familiar.Bulley
Ohh man....I'm working on SharePoint 2010, which forces IE8 rendering. Having this issue as well. Sucks to be working on technology of the past, where you cant utilize latest features. =( For us, browser checks aren't the days of the past.Imide
P
3

Try

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

Or

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

A hackier hack might be to use the margin-right and overflow properties

input { margin-right: -20px; overflow: hidden }
Palmy answered 19/6, 2013 at 16:53 Comment(6)
::-ms-clear isn't even being recognized to begin with, so this does nothing.Lithuanian
Indeed, ::-ms-clear isn't recognized at all, and unfortunately the 'hacky' option doesn't do the trick either.Bulley
of course it isn't being recognised. That's the whole point of quirks mode -- Quirks mode has IE5's version of CSS; it removes all the CSS features that are newer than that from the browser.Hudnut
@Bulley - Aron couldn't you use CSS to hide the application generated clear buttons instead of the IE10 generated ones?Palmy
@Hudnut Understood, but since the browser is using IE10 features while in IE5 mode, I'm trying to find a way to tell it to stop.Bulley
@Bulley - I get what you're trying to do. What I'm saying is that I doubt there's a way to do it. Not while you're still in quirks mode, anyway. The fact that IE10 is rendering it's built-in clear gadget while in quirks mode is unfortunate; it probably shouldn't be doing that (given that quirks mode is supposed to pretending to be IE5), but I can understand the IE developers leaving it there.Hudnut

© 2022 - 2024 — McMap. All rights reserved.