Textbox style different on localhost and web server

Question

The following code on a remote web server renders an "invisible" textbox as expected. However the same code on localhost still shows the textbox borders. There are no other stylesheets coming into play (that I am aware of) - and !important has no effect.

<input type="text" style="color:White; border:none; width:1px;" />

I found this discussion which suggests using instead border-left: none, border-right: none etc. This works!! But I'm still posting here because I don't understand why. The page on the server is identical, and being viewed on the same browser (IE8).

Any thoughts?

Answer 1

On the remote server, IE8 is in "IE8 Mode", so it works as expected.

For whatever reason, on localhost IE8 is in "IE7 Mode".

Hit F12 to bring up the Developer Tools to verify this.

Possible causes:

• You hit the Compatibility Mode button when viewing the page from localhost.
• Otherwise, see http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx or http://hsivonen.iki.fi/doctype/#ie8modes.

Answer 2

This may be a long shot, but if the local host and web server are compiling the code differently it may be worth trying border: 0; instead or border: none; in the styling.