logo标签列表

IE7中div重叠的CSS问题

csslayoutinternet-explorer-7
3
我有这个页面：http://jsfiddle.net/aJNAw/1/ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    display:inline-block;
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>
    <div class="page_header_billboard"></div>

</div>



</body>
</html>

布局在IE7中不起作用，但在其他浏览器（Chrome、Firefox）中正常。

有人能提供帮助吗？

4个回答
2
在你的浮动元素（.wrapper 的子元素）中添加 display: inline。通过将 zoom: 1 应用于 .wrapper，强制对容器进行布局。
2

将 <div class="homebox"> 移动到 <div class="page_header_billboard"> 内部。

演示 (编辑)

唉，是啊，不知道为什么我没注意到。这使整个负边距变得不必要了。 - D.N.
@D.N.：至少你想出了一个可行的办法，即使它不是最简单的方法 :) - thirtydot
@greener：你也可以完全省略 display: inline-block 并获得相同的效果。@thirtydot：我已经非常擅长“踢和打”CSS使其工作，但有时我会迷失在细节中，最简单的方法并不那么明显。 - D.N.
1
这可能不是最好的做法，但它对这个测试用例没有影响。保留它或删除它（后者更好），效果完全相同。 - D.N.
0
将page_header_billboard放在顶部，并将homebox的margin-top设置为-376px（即page_header_billboard的高度）。
这适用于IE6、IE7和FF3.6。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper
{
    width:960px;
    margin:0px auto;
    overflow:hidden;
}

.page_header_billboard
{
    background: #669933;
    height: 376px;
    width:960px;
}
.homebox
{
    margin-top: -376px;
    float:right;
    clear:right;
    position:relative;
    right:20px;
    top:36px;
    overflow:hidden;
}

.homebox a
{
    background:#ccc;
    display:block;
    width:200px;
    height:100px;
    text-align:center;
    text-decoration:none;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.homebox a:hover
{
    opacity:0.8;
    filter:Alpha(opacity=80);
}

.homebox a span
{
    color:#333;
    line-height:27px;
}

.homebox_middle
{
    margin:1px 0;
}



</style>

</head>

<body>

<div class="wrapper">

    <div class="page_header_billboard"></div>
    <div class="homebox">
        <a href="#" class="homebox_first"></a>
        <a href="#" class="homebox_middle"></a>
        <a href="#" class="homebox_last"></a>
    </div>

</div>



</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接