IE displays page differently between debug in visual studio and on the server

Question

This is a continuation of this question.

I have an ASP.NET app that has some sections displaying differently when viewed in IE8 in DEBUG vs displaying off the published TEST server location.

When I view the page in Debug (through VS 2010), I see this:

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

The title box only has the text background color as black instead of the whole 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's 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 was thinking that this is probably some kind of caching issue. However, if I make slight changes to the CSS (e.g. change the background color) it picks that up and displays it. Also, I've added a dynamically generated GUID to the querystring for the css files, so they should never get cached. Fiddler confirms that they are not cached, too.

IE seems to render the HTML/CSS differently when viewing through Visual Studio Debug vs accessing the page directly from the server.

What things might cause this behavior?

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

Answer 1

When IE renders on localhost, it will use standard compliant mode.

However, when it renders on an Intranet, it will use compatibility mode.

Don't ask me why it does this, it's just one of those arbitrary MS things in order to spice up our developer lives.

Just add this to your header to force IE into standard compliant mode :

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

Enjoy :)

Answer 2

Credit to JungleFreak for the complete answer

IE8 runs in different modes depending on if it's visiting a site running on localhost vs another server. It's weird, I know. I've run across this issue before as well. Use the developer tools (F12) and check which mode (Quirks, IE7 Standard, IE8 Standard, IE8 Compatibility) the browser is running in.