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>
Community
  • 1
  • 1
Aron
  • 1,448
  • 1
  • 12
  • 29
  • 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. – BoltClock Jun 19 '13 at 16:58
  • 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... – Aron Jun 19 '13 at 17:03
  • 1
    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. – Spudley Jun 19 '13 at 17:05
  • 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. – Aron Jun 19 '13 at 17:15
  • 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. – harsimranb Nov 25 '13 at 20:23

1 Answers1

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 }
Louis Ricci
  • 19,594
  • 5
  • 43
  • 60
  • 3
    `::-ms-clear` isn't even being recognized to begin with, so this does nothing. – BoltClock Jun 19 '13 at 16:53
  • Indeed, ::-ms-clear isn't recognized at all, and unfortunately the 'hacky' option doesn't do the trick either. – Aron Jun 19 '13 at 17:02
  • 1
    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. – Spudley Jun 19 '13 at 17:08
  • @Aron - Aron couldn't you use CSS to hide the application generated clear buttons instead of the IE10 generated ones? – Louis Ricci Jun 19 '13 at 17:14
  • @Spudley 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. – Aron Jun 19 '13 at 17:20
  • @Aron - 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. – Spudley Jun 19 '13 at 18:34