IE renders the page differently between debugging in visual studio and on the server

Question

This is a continuation of this issue.

I have an ASP.NET application that has several sections displayed differently when viewed in IE8 in DEBUG and displayed the published location of the TEST server.

When I view a page in Debug (via VS 2010), I see this:

However, when I publish to the server and view it directly, it looks like this:

The title field has only the background color of the text as black, not the entire section.

Here's the CSS:

.imageBox { position: relative; float: left; border-style: solid; border-width: 1px; text-align: center; } .imageBoxTitle { width: 100%; background-color: #333333; padding: 5px; } .imageBoxTitleLbl { font-family: Verdana; font-weight: bold; font-size: small; color: White; } 

Here is the generated HTML

  <div class="imageBox"> <div class="imageBoxTitle"> <span id="MainContent_ImagesPanel_ImageHolder1_ImageBoxTitleLabel" class="imageBoxTitleLbl">ITEM OVERVIEW</span> </div> <div class="imagePlaceHolder"> <p class=".centeredImage"><a id="MainContent_ImagesPanel_ImageHolder1_ImageHyperLink" href="UserImages/nu5t3hhs.jpg" target="_blank"><img src="UserImages/nu5t3hhs.jpg" height="200" width="200" /></a></p> <span id="MainContent_ImagesPanel_ImageHolder1_CustomValidator1" style="color:Red;visibility:hidden;">*</span> </div> <div class="imageAction"> </div> </div> 

So I thought this was probably some kind of caching problem. However, if I make small changes to the CSS (for example, change the background color), it selects this and displays it. In addition, I added a dynamically generated GUID to querystring for css files, so they should never be cached. Fiddler confirms that they are also not cached.

IE seems to do HTML / CSS differently when viewed through Visual Studio Debug and when accessing the page directly from the server.

What things can cause this behavior?

UPDATE: When I view a page in Chrome or Firefox on a published server, it displays correctly. I cleared IE cache (ctrl-f5), deleted .css from server and reloade, etc.

Answer 1

When IE displays localhost , it will use standard mode .

However, when it is displayed on the Intranet , it will use compatibility mode .

Do not ask me why this is done, this is just one of those arbitrary MS things to liven up our developer lives.

Just add this to your header to get IE to work in standard mode:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Enjoy :)

Answer 2

JungleFreak loan for a complete answer

IE8 works in different modes depending on whether it visits a site running on localhost and another server. This is strange, I know. I also ran into this problem. Use the developer tools (F12) and check in which mode (Quirks, IE7 Standard, IE8 Standard, IE8 compatibility) the browser works.