IEのCSSフロートドロップ？

IEの古いバージョンで問題が発生しました。 3つの浮動小数点divを3つの浮動小数点divの上に置いています。どちらも別々のラッパーです。下位のdivはIEの古いバージョンで上位のものと重複しています。 Safari、モバイル、そしてFirefoxのような機能IEのCSSフロートドロップ？

助けてください。

マイコード：

#header { 
z-index: 1000; 
background-image: 
background-repeat: repeat-x; 
height: 39px; 
margin-right: auto; 
margin-left: auto; 
} 

#wrapper { 
background-position: center bottom; 
background-repeat: no-repeat; 
width: 980px; 
margin-right: auto; 
margin-left: auto; 
height: 650px; 
} 

#headwrapper { 
margin-right: auto; 
margin-left: auto; 
height: 39px; 
width: 900px; 
background-position: left; 
background-repeat: no-repeat; 
} 

#slidercontainer { 
padding-top: 20px; 
float: right; 
background-repeat: repeat; 
background-image: 
padding-right: 50px; 
height: 280px; 
width: 750px; 
background-color: black; 
} 

#botwinleft { 
padding-left: 20px; 
padding-top: 30px; 
border-left-style: none; 
border-bottom-style: none; 
border-right-style: none; 
border-top-style: none; 
float: left; 
height: 335px; 
width: 410px; 
} 

#botwinleft h3 { 

text-shadow: 3px 3px #e1e1e1; 

color: #da1922; 

} 

#botwincenter { 
border-left-style: none; 
border-bottom-style: none; 
border-right-style: none; 
border-top-style: none; 
height: 365px; 
float: left; 
width: 95px; 
} 

#botwinright { 
padding-top: 50px; 
border-left-style: none; 
border-bottom-style: none; 
border-right-style: none; 
border-top-style: none; 
background-repeat: no-repeat; 
height: 315px; 
float: left; 
width: 445px; 
} 

body { 
background-image: 
background-color: black; 
background-repeat: repeat; 
padding: 0px; 
margin: 0px; 
} 

#left { 
background-image: 
background-repeat: repeat; 
padding-right: 20px; 
padding-left: 40px; 
border-style: none; 
height: 250px; 
float: left; 
width: 239px; 
} 

#left img { 
padding-right: 15px; 

} 

#center { 
background-image: 
background-repeat: repeat; 
padding-right: 20px; 
padding-left: 20px; 
border-style: none; 
height: 250px; 
float: left; 
width: 260px; 
} 


#center img { 
padding-right: 15px; 
} 


#right { 
background-image: 
background-repeat: repeat; 
border-style: none; 
height: 250px; 
float: left; 
width: 375px; 
} 


#right img { 
padding-right: 15px; 
} 


#footer { 
border-top-style: groove; 
border-top-color: #4c4c4c; 
border-top-width: 2px; 
background-image: 
background-repeat: repeat; 
clear: both; 
height: 150px; 
margin-right: auto; 
margin-left: auto; 
} 

#nav { 
background-image: 
background-repeat: repeat-y; 
height: 300px; 
float: left; 
width: 150px; 
} 

#menu { 
padding: 0px; 
margin: 0px; 
width: 0px; 
} 

#menu li { 
list-style-type: none; 
margin:0 0 0.25em 0; 
} 

#menu a, #menu a:visited { 
background-color: #4c4c4c; 
display:block; 
width:9em; 
text-align: center; 
text-decoration:none; 
color:#eee; 
} 

#menu a:hover { 
background: #ddd; 
color: red; 
} 
#leftfloat { 
border-left-style: none; 
border-bottom-style: groove; 
border-right-style: none; 
border-top-style: none; 
border-bottom-color: #595959; 
border-bottom-width: 3px; 
background-image: 
background-repeat: repeat; 
height: 300px; 
background-color: #858585; 
margin-left: auto; 
} 
#bottomwrap { 
background-position: 0 bottom; 
background-image: 
background-repeat: no-repeat; 
height: 700px; 
margin-right: auto; 
margin-left: auto; 
width: 980px; 
} 
#lowerbackground { 
border-top-style: none; 
background-image: 
background-position: 0 bottom; 
background-repeat: repeat-x; 
height: 700px; 
margin-right: auto; 
margin-left: auto; 
} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title></title> 
</head> 
<body> 
<div id="header"> 
<div id="headwrapper"></div> 
</div> 
<div id="leftfloat"> 
<div id="wrapper"> 
<div id="nav"> 
menu here 


</div> 
<div id="slidercontainer"> 
<div id="slider"> 
<ul> 
images here 
</ul> 
</div> 

</div> 
<div id="botwinleft"> 
<h3>Welcome to S & L Motors</h3> 
<p>text here</p></div> 
<div id="botwincenter"></div> 
<div id="botwinright"><iframe width="325" height="250" frameborder="0" >View Larger Map</a></small></div> 
</div> 
</div> 
<div id="lowerbackground"> 
<div id="bottomwrap"> 
<div id="left"> 
<h3 align="center">Great Service</h3> 

<p>text here 
</p> 
</div> 
<div id="center"> 
<h3 align="center">Weekend Work</h3> 

<p>text here.</p> 
</div> 
<div id="right"> 
<h3 align="center">Expert Staff</h3> 

<p>texte.</p> 
</div> 
</div> 
</div> 
<div id="footer"></div> 
</body> 
</html>

EDIT：DUPポストについて

[OK]をおかげで非常に多くの提案をして申し訳ありません。私はこれらの提案だけでなく、xml1移行型doctypeとHTML 4.01の移行を試してみましたが、何も機能していませんか？あなたが追加してみてください可能性が

出典

2011-02-02 Rob

多分、浮動ブロックの下で '
'を試してみてください – Neddy

あなたのHTMLの先頭行に追加できますか？特にdoctype。あなたはこれを見ているIEのどのバージョンですか？ IEの最小バージョンは何ですか？ IE7？ – thirtydot

：

_clear: both

をあなたの下のラッパーで、これが唯一のIE6でレンダリングされます。

出典

2011-02-02 23:55:12 TNC

2つの同じ質問があるので、私は両方に答えます。そのうちの1つが閉じられる。

#header { 
z-index: 1000; 
background-image: /* This might be screwing up IE */ 
background-repeat: repeat-x; 
height: 39px; 
margin-right: auto; 
margin-left: auto; 
}

あなたのコードは非常に反復的である：

さて、ここを見ていくつかのものです。私はグループがそれを読みやすくするために（とスペースを節約するために）一緒にスタイル宣言を繰り返します：

#header, #wrapper, #headwrapper { 
margin-right: auto; 
margin-left: auto; 
}

このコードを凝縮することができます：border-style: none;に

border-left-style: none; 
border-bottom-style: none; 
border-right-style: none; 
border-top-style: none;

を。私は上、下、左、右以外の他の方向を知っていないので、すべての人に同時に適用するかもしれません。

重複の問題は、このようにします。それが機能するかどうか教えてください（私はIEの専門家ではありません）。

#wrapper1, #wrapper2 
{ 
    overflow: auto; /* This stops the floated elements from "deflating" the parent. Remove it and you'll see. */ 
    display: block; 
}

幸運を祈る！

出典

2011-02-02 23:55:21 Blender

それは必要ではありませんでした - 私は、両方の質問をマージするために偽の質問にモッドのフラグを付けました。 – BoltClock

さて、確かめて（私もやった）。 – Blender

IEのCSSフロートドロップ？

答えて

関連する問題