IIS Rendering Discrepancy: localhost vs Hostname URL Causes Scrollbar and CSS Positioning Issues


2 views

While working on an ASP.NET application, I encountered a peculiar issue where pages render differently depending on whether I access them via localhost or the machine's hostname. The symptoms manifest in several ways:

  • Disabled vertical scrollbar appears when using hostname
  • Absolutely positioned DIVs shift off-center
  • IE-specific rendering differences (only when not using localhost)

To verify this wasn't application-specific, I created a blank test page:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html>
<head>
    <title>IIS Rendering Test</title>
    <style>
        #centeredDiv {
            position: absolute;
            width: 300px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="centeredDiv">
        Test Content
    </div>
</body>
</html>

After extensive testing, I identified these key factors:

  • Document Mode Differences: IIS serves pages with different X-UA-Compatible headers based on URL
  • Security Zones: Localhost vs network hostname puts IE in different security contexts
  • Compatibility View: Automatic compatibility settings get triggered for non-localhost URLs

Here's the comprehensive fix that worked:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=edge" />
        </customHeaders>
    </httpProtocol>
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />
    <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    </staticContent>
</system.webServer>

For the positioning issues, add these CSS overrides:

html {
    overflow-y: auto !important;
}
body {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

After implementing these changes:

  1. Clear all browser caches
  2. Restart IIS (iisreset)
  3. Test with both localhost and hostname URLs
  4. Verify IE Developer Tools shows "Edge" document mode

The combination of server-side headers and CSS adjustments ensures consistent rendering regardless of how the page is accessed.

During a recent deployment, I encountered a peculiar behavior where ASPX pages rendered differently depending on whether I accessed them via localhost or the machine's hostname. The symptoms included:

  • Vertical scrollbar appearing unexpectedly when using hostname
  • Absolutely positioned DIV elements misaligned in IE when not using localhost
  • Consistent rendering across browsers only with localhost URLs

To verify the problem wasn't server-specific, I created a minimal test case:

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html>
<head>
    <style>
        #centeredDiv {
            position: absolute;
            width: 300px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="centeredDiv">Test Content</div>
</body>
</html>

After extensive testing, I identified several contributing factors:

  • Document Mode Differences: IIS may serve pages with different X-UA-Compatible headers based on URL
  • Zone-Specific Settings: Internet Explorer applies different security zones to localhost vs hostname URLs
  • Compatibility View: Enterprise mode or compatibility settings may activate differently

Adding these meta tags to the head section resolved most issues:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Additionally, I modified the IIS configuration to ensure consistent headers:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="X-UA-Compatible" value="IE=edge" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

To avoid similar issues in the future:

  1. Always test using both localhost and hostname URLs during development
  2. Implement a standardized DOCTYPE declaration (HTML5 recommended)
  3. Consider adding CSS resets/normalization to minimize browser inconsistencies

For critical applications, you might want to detect and handle this scenario:

if (window.location.hostname !== "localhost" && 
    !!document.documentMode && document.documentMode < 11) {
    // Apply IE-specific fixes or show warning
    document.documentElement.className += ' ie-compatibility';
}