昨晚，我在 IE8 中遇到了一个奇怪的行为，因为我看到一个页面的两个明显不同的布局托管在不同的服务器上。在我的本地 Web 服务器上， header 标记看起来像预期的那样，其左对齐 Logo 和右对齐并堆叠的实用程序链接，所有这些都显示在居中的页面上。在暂存 Web 服务器和生产 Web 服务器上，页眉标记在页面上完全不可见，因为它位于比页面高 152 像素的位置。
我知道下面的“.header .hog”选择器 CSS 代码是 hack。这是对需要立即部署的更改的快速修复。与其分析如何改进此代码，我更感兴趣的是了解 IE8 中这些表示差异的原因。我有几个问题:
- 标记可以有不同的编码吗？如果是这样，确定这种可能性的最佳方法是什么？以及 IIS7 中的哪个设置(如果有)负责编码输出？
- 权限是否是导致此问题的原因？
- IIS7 中是否有确定标记是否被严格解释的功能？
- Vista 上的 IE8 和 XP 上的 IE8 的布局引擎有区别吗？
我的标记代码如下:
<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;
}
感谢您的帮助。大家感恩节快乐!
约翰
最佳答案
Is there a difference between the Layout Engines of IE8 on Vista and IE8 on XP?
如果我没理解错的话，您似乎不仅拥有 2 台服务器，而且还从 2 台不同的计算机访问该站点，一台运行 XP，另一台运行 Vista。打开两台电脑的IE开发者工具，观察浏览器模式和文档模式。也许其中一个浏览器已永久设置为 IE7 兼容模式？或者其中一台服务器正在发送 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />标记强制兼容模式？
XP 和 Vista 上的 IE 之间存在细微差别，因为 IE 使用操作系统控件来呈现某些控件，例如按钮、文本框、选择框和滚动条。但是，由此引起的布局差异应该不会那么大。
要查找 header 中的差异，您可以安装 fiddler 或 httpwatch 等工具并在两台机器上检查它们。
关于css - 不同 Web 服务器上 IE8 中的不同布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1792487/