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

回答

相關問題