IE7 CSSの問題が

私は、このページがあります。http://jsfiddle.net/aJNAw/1/IE7 CSSの問題が

<!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で動作しませんが、それは他のブラウザ（クロム、Firefoxの）で大丈夫です。

誰でも手伝うことができますか？

出典

2011-02-01 greener

の中に<div class="homebox">を移動します。

Live Demo（edit）

出典

2011-02-01 18:28:01 thirtydot

一息、ええ、なぜ私はそれをキャッチしていないかわからない。負のマージン全体を不要にします。 –

@ D.N .:最低でも、一番簡単な方法ではなかったとしても、働いているものを考え出しました:) – thirtydot

ありがとう！ – greener

私はテストするIE7を持っていませんが、あなたの問題は IE7の使用の可能性がありますinline-blockを使用していくつかの表示の問題があります。これはあなたを助けるかもしれない：

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

出典

2011-02-01 18:13:46

これはおそらく最良のものではありませんが、このテストケースには影響しません。それを残しておくか、またはそれを取り除く（後者の方が望ましい）ことはまったく同じです。 –

あなたの山車（.wrapperの子供）にdisplay: inlineを追加します。 zoom: 1〜.wrapperを適用してコンテナのレイアウトを強制します。

出典

2011-02-01 18:14:12 Chris

ありがとう、私の問題を解決しました。 – Diana

上部にpage_header_billboardを入れ、そして（page_header_billboardの高さ）-376pxするhomeboxのマージントップを設定します。

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の問題が

答えて

関連する問題