为什么我的布局在 IE<6 而不是 IE>7 中有效？答案

【问题标题】：Why does my layout work in IE<6 but not IE>7?为什么我的布局在 IE<6 而不是 IE>7 中有效？
【发布时间】：2011-11-02 08:04:20
【问题描述】：

我在 Mac 上开发，所以我依靠模拟器进行 IE 测试。根据 netrenderer (http://ipinfo.info/netrenderer/) 的说法，我的布局（在我安装的 Safari 和 Firefox 版本上自然可以很好地工作）在 IE6 及更低版本中工作，但在 IE7 及更高版本中根本不行。

请注意，我没有用实际的 IE 安装测试过这个 - 只用 netrenderer。它表明在 IE6 及更低版本上，尽管存在一些小的字体大小问题，但它主要工作：“菜单”位于左侧，“内容”位于右侧，并且“菜单”显示背景图像”。在 IE 8&9 中，div 彼此重叠，而在 IE7 中，“菜单”div 被推到最右边。在 7、8 和 9 中，“菜单”没有显示背景图像。

我创建了一个测试页面，其中包含简化的内容和内置在标题中的相关样式：http://www.steph-morris.com/test.html

我已经通过 W3C 验证器运行它并且验证良好。正如许多 StackOverflow IE 定位解决方案所建议的那样，我尝试过使用 position: 各种容器的变体，但无济于事。我希望一些在浏览器兼容性战争中身经百战的老手能够看一看，让我知道为什么我选择的布局概念不适用于 IE，并指出我的方向可接受的 hack 或替代品。

【问题讨论】：

老实说，您列出的那个测试仪似乎有点躲闪。我会尝试使用合适的浏览器，或者您可以尝试使用 adobe 中的browser labs。您在 IE7 和 8 中仍有一些小问题。IE9 看起来还可以，而 IE6 看起来是个坏消息
你可能是对的，浏览器测试员正在躲避！试图避免 Adobe 浏览器实验室的 Flash 汤。现在通过那里，一切看起来都很好（或至少功能正常），除了 IE7- 将菜单 div 推到右侧。

标签： css layout internet-explorer-7 internet-explorer-6 compatibility

【解决方案1】：

这是不久前的事了，但我注意到您的链接仍然有效（并且仍然显示损坏的布局）...

我快速浏览了一下，我认为问题出在你的 CSS 中。我没有时间仔细查看，但我确实设法通过更改在 IE9/8/7 和 FF 中有效的一些行来快速绘制您网站的基本版本。

希望这会有所帮助:)

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Steph Morris | TEST</title>

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan">

<style>

body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica}

#menu {width:170px; float:left; margin-right:1em}
#logo{}
#logo h1{}
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif}

#middle_left ul {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 13px;
list-style:none;
padding:0;
color:#000}

#other {float:left; width:600px;}
#other h1 {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 35px;
padding-right: 15px;
padding-top: 15px;
margin:0;
}
#other_text {padding:25px;}
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent}
</style>

</head>

<body>    
<div id="container_other">
    <div id="menu">
        <div id="menu_left">
            <div id="top_left">
                <div id="logo"><h1><a href="#">Steph Morris</a></h1></div>
            </div>
            <div id="middle_left">
                <ul>
                    <li><div><a href="#">The Start</a></div></li>
                    <li><div><a href="#">About</a></div></li>
                    <li><div><a href="#">The Novel</a></div></li>
                    <li><div><a href="#">Translation / Übersetzung</a></div></li>
                    <li class="current"><div><a href="#">Around</a></div></li>
                </ul>
            </div>
            <div id="bottom_left">
                <p class="contact"><a href="mailto:steph@stephmorris.com">Contact:<br>steph@<br>stephmorris.com</a></p>
            </div>
        </div>
    </div>
    <div id="other" class="">
        <h1 class="veolay">Other Works</h1>
        <div id="other_content">
            <div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes&mdash;we will manipulate these soon using jQuery.</p>
            <p>For the slideshow animation we are going to switch between each photo at a set rate. So let&rsquo;s start by writing a function that brings in a new photo on top of the last active image:</p>
        </div>
        </div> 
    </div> 
</div>
</body>
</html>

【讨论】：