Question

我正在Mac上开发，所以我依靠模拟器进行IE测试。根据netrenderer（http://ipinfo.info/netrenderer/），我的布局（在我安装的Safari和Firefox版本中自然很漂亮）可以在IE6及更低版本中使用，但在IE7及以上版本中根本不可用。

请注意，我没有使用netrenderer进行实际的IE安装测试。它显示在IE6及更低版本上，尽管存在一些较小的字体大小问题，但它主要起作用：“菜单”位于左侧，“内容”位于右侧，背景图像显示为“菜单” ”。在IE 8和9中，div位于彼此之上，而在IE7中，“菜单”div被推到最右边。在7,8和9中，没有背景图像显示“菜单”。

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

我通过W3C验证器运行它并且验证正常。我已经尝试过使用位置：各种容器的变化，正如许多StackOverflow IE定位解决方案所建议的那样，无济于事。我希望浏览器兼容性战争的一些经过实战训练的老兵能够看一眼，让我知道为什么我选择的布局概念不适用于IE，并指出我的方向可接受的黑客或替代品。

Answer 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>

为什么我的布局在IE＆lt; 6但不是IE＆gt; 7中工作？

1 个答案: