IE8在不同Web服务器上的不同布局

昨晚，我在IE8中遇到了一个奇怪的行为，因为我看到两个明显不同的页面布局被托管在不同的服务器上。在我的本地网络服务器上，标题标记与其左侧对齐的徽标以及右对齐和堆叠的实用工具链接看起来一样，所有这些都显示在居中页面上。在分段Web服务器和生产Web服务器上，标题标记在页面上完全不可见，因为它位于比页面高152px的位置。IE8在不同Web服务器上的不同布局

我明白下面的“.header .hog”选择器CSS代码是黑客。这是对需要立即部署的更改的快速修复。与其分析如何改进此代码，我更感兴趣的是了解IE8中这些表示差异的原因。我有几个问题是：

标记可以有不同的编码？如果是这样，确定这种可能性的最好方法是什么？并且，IIS7中的哪些设置（如果有的话）负责编码输出？
权限可能是导致此问题的原因吗？
在IIS7中是否有一个功能确定标记是否被严格解释？
Vista和IE8的布局引擎在Vista上有区别吗？

我的标记代码如下：

<body> 
    <div class="content"> 
     <div class="header"> 
      <h1 id="logo"><img src="/img/logo.jpg" /></h1> 
      <div class="hog"> 
       <a class="see">Text</a> 
       <div class="more"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </div> 
      <div class="utility-links"> 
       <a>link1</a>| 
       <a>link2</a>| 
       <a>link3</a>| 
       <a>link4</a> 
      </div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</body>

我的CSS代码如下：

* { 
    border:none; 
    line-height:normal; 
    margin:0; 
    outline:none; 
    padding:0; 
    text-decoration:none; 
} 

body{ 
    background:#70133F; 
    color:#000000; 
    font-family:Arial, Verdana, Helvetica, sans-serif; 
    font-size:12px; 
    margin:0 auto; 
} 

.clear{ 
    clear:both; 
    font-size:0; 
    height:0; 
    line-height:0; 
    margin:0; 
    padding:0; 
} 

.content{ 
    background:#FFFFFF; 
    margin:0 auto; 
    width:970px; 
} 

.header{ 
    height:160px; 
} 

.header #logo{ 
    float:left; 
    font-size:0; 
    height:124px; 
    margin:25px 0 0 18px; 
    width:204px; 
} 

.header .util-links { 
    color:#E83F00; 
    font:bold 12px; 
    float:right; 
    margin:135px 15px 0 0; 
    text-align:right; 
    text-transform:uppercase; 
} 

.header .util-links a { 
    padding:0 10px; 
} 

.header .hog { 
    height:3px; 
    position:relative; 
    margin-top:-152px; 
    text-align:right; 
    width:945px; 
} 

.header .hog a.see-holiday { 
    color:#E83F00; 
    font:bold 12px; 
    text-transform:uppercase; 
    height:40px; 
    width:254px; 
} 

.header .hog .guidelines { 
    display:none; 
    margin-left:524px; 
    text-align:left; 
    width:428px; 
}

感谢您的帮助。感恩节快乐，大家好！
约翰

来源

2009-11-24 phreeskier

是否有关于Vista和XP上IE8 IE8的布局引擎之间的差异？

如果我理解正确，看起来您不仅拥有2台服务器，而且您还从2台不同的计算机（一台运行XP和另一台Vista）访问该站点。在两台计算机上打开IE开发人员工具，并观察浏览器模式和文档模式。也许其中一个浏览器已被永久设置为IE7兼容模式？或者其中一台服务器发送<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />标签强制进行兼容模式？

XP和Vista之间的IE浏览器略有不同，因为IE使用操作系统控件来呈现某些控件，如按钮，文本框，选择框和滚动条。但是，由此造成的布局差异不应该太大。

为了找到不同的标题，你可以安装一个工具，如fiddler或httpwatch，并在两台机器上检查它们。

来源

2009-11-24 20:01:22

感谢您的快速回复和好主意。此问题与在不同Web服务器上托管的页面比在不同操作系统上显示的页面更相关。这两个服务器都没有在网页上添加标签，或者向该网页添加了“X-UA-Compatible：IE = EmulateIE7”标签HTTP标头。此外，浏览器未在IE7兼容模式下永久设置。而不是模拟IE8中的IE7标记，我想修复这种根本原因的演示差异。谢谢你的想法。 – phreeskier 2009-11-24 20:53:41

开发工具为文档模式和浏览器模式显示了什么？是在主机名（Intranet区域）中使用没有点的URL的页面之一？这些默认放在CompatMode中。 – EricLaw 2009-11-24 23:13:40

我刚刚得知，IE浏览器将所有可公开访问的互联网网站在IE 8浏览器模式和所有Intranet站点到IE 8浏览器的兼容模式，优雅地展示专为较旧的网络浏览器以及在IE8的内容投放。这就解释了为什么本地服务页面看起来正确并且浏览器模式设置为IE8兼容模式。再次感谢你的帮助。 – phreeskier 2009-11-24 23:18:18

IE8在不同Web服务器上的不同布局

回答

相关问题