IE7 CSS问题有重叠的div

我有这个页面：http://jsfiddle.net/aJNAw/1/IE7 CSS问题有重叠的div

<!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浏览器，火狐）的罚款。

任何人都可以提供帮助吗？

来源

2011-02-01 greener

移动<div class="homebox">里面<div class="page_header_billboard">。

Live Demo（edit）

来源

2011-02-01 18:28:01 thirtydot

感叹，是的，不知道为什么我没有接受。使整个负值不必要。 – 2011-02-01 18:34:27

我没有IE7测试，但你的问题可能是display: inline-block使用IE7有一些显示问题使用inline-block。这可以帮助你：

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

来源

2011-02-01 18:13:46

这可能不是最好的东西，但它对这个测试用例没有影响。留下它或删除它（后者是首选）呈现完全相同。 – 2011-02-01 18:42:55

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

来源

2011-02-01 18:14:12 Chris

谢谢，解决了我的问题。 – Diana 2012-07-28 15:14:59

把page_header_billboard在顶部，并设置边距homebox至-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>

来源

2011-02-01 18:32:27

IE7 CSS问题有重叠的div

回答

相关问题