Question

我有这个页面：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）中也没问题。

有人能帮忙吗？

Answer 1

将display: inline添加到您的花车（.wrapper的孩子）。通过将zoom: 1应用于.wrapper来强制容器布局。

Answer 2

在<div class="homebox">内移动<div class="page_header_billboard">。

Live Demo（edit）

Answer 3

我没有IE7进行测试，但您的问题可能是使用display: inline-block IE7使用inline-block时出现了一些显示问题。这可能会对您有所帮助：

http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/

Answer 4

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

重叠div的IE7 CSS问题

4 个答案: