Question

昨晚，我在IE8中遇到了一个奇怪的行为，因为我看到两个明显不同的页面布局被托管在不同的服务器上。在我的本地Web服务器上，标题标记看起来像预期的左对齐徽标和右对齐和堆叠实用程序链接，所有这些都显示在居中页面上。在登台Web服务器和生产Web服务器上，页眉标记在页面上完全不可见，因为它的位置比页面高152px。

我知道下面的“.header .hog”选择器CSS代码是一个黑客。这是对需要立即部署的更改的快速修复。我不想分析如何改进这些代码，而是更了解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;
}

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

Answer 1

之间是否存在差异？ IE8在Vista和IE8上的布局引擎在XP？

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

在XP和Vista上IE之间存在细微差别，因为IE使用操作系统控件来呈现某些控件，如按钮，文本框，选择框和滚动条。但是，由此造成的布局差异不应该那么大。

要查找标题中的差异，您可以安装fiddler或httpwatch等工具，并在两台计算机上进行检查。

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

1 个答案: