2011-07-12 8 views
0

IE9のフローティングディビジョンで問題が発生しています。 2番目のdiv(枠線を追加した後)は、ヘッダータグと順序付けられていないリストを持つ1つのdivですが、2つに分割されているようです。ヘッダータグは正しく表示されますが、リストは最初のdivの下にプッシュされ、他のdivはリストの横に表示されます。リストを含むdivを削除した場合、次のdivでも同じことが起こります。ヘッダーは正しく表示されますが、画像は最初のdivの下にプッシュされます。サイト:http://www.greenhomesofmaine.com/を見て、フッターまでスクロールしてください。 IE9は、このdivの整列不良を引き起こす唯一のブラウザです。フローティングディビジョンがIE9で正しく整列しない

CSS:

#footertopbg { 
display: block; 
background: #333333; 
width: 980px; 
margin: 10px auto 0px; 
padding: 0px 0px 0px 0px; 
border-top: 5px solid #222222; 
} 

#footertop { 
float: left; 
display: block; 
line-height: 16px; 
background: #333333; 
width: 980px; 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
} 

#footertop h4 { 
color: #FFFFFF; 
font-size: 16px; 
font-family: Arial, Helvetica, sans-serif; 
font-weight: bold; 
text-transform: normal; 
letter-spacing: -0.2px; 
margin: 0px 0px 10px 0px; 
padding: 20px 0px 5px 0px; 
text-decoration: none; 
border-bottom: none; 
} 

#footertop li { 
text-decoration: none; 
list-style-type: none; 
} 

#footertop li a, #footertop li a:link, #footertop li a:visited { 
color: #CCCCCC; 
font-weight: normal; 
text-decoration: none; 
} 

#footertop ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px 0px 10px 0px; 
} 

#footertop ul ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
} 

#footertop ul li { 
list-style-type: none; 
margin: 0px 0px 8px 0px; 
padding: 0px; 
} 

#footertop ul li { 
display: inline; 
list-style-type: none; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
} 

#footertop ul li a { 
background: none; 
display: block; 
padding: 5px 7px 3px 7px; 
margin: 0px 0px 8px 0px; 
border-left: 5px solid #333333; 
} 

#footertop ul li a:hover { 
background: none; 
color: #FFFFFF; 
display: block; 
padding: 5px 7px 3px 7px; 
border-left: 5px solid #0099CC; 
} 

#footertop .textwidget { 
color: #CCCCCC; 
line-height: 18px; 
} 

.footertopleft { 
width: 170px; 
float: left; 
display: inline; 
margin: 0px 10px 0px 15px; 
padding: 0px 0px 0px 0px; 
} 

.footertopmidleft { 
width: 170px; 
float: left; 
display: inline; 
margin: 0px 10px 0px 10px; 
padding: 0px 0px 0px 0px; 
} 

.footertopmid { 
width: 170px; 
float: left; 
display: inline; 
margin: 0px 10px 0px 10px; 
padding: 0px 0px 0px 0px; 
} 

.footertopmidright { 
width: 170px; 
float: left; 
display: inline; 
margin: 0px 10px 0px 10px; 
padding: 0px 0px 0px 0px; 
} 

.footertopright { 
width: 170px; 
float: right; 
display: inline; 
margin: 0px 15px 0px 10px; 
padding: 0px 0px 0px 0px; 
} 

私はこのような問題に遭遇したことがないし、任意の助けをいただければ幸いです。

答えて

0

互換モードでIE9を使用してみてください。どんな理由であれ、そのオプションがあり、IE9に関連するばかげた問題を修正する唯一の方法は何度もあります。

+0

あなたの返事をありがとう、それは完全に互換モードで動作しますが、IE9でも同様に動作する必要があります。何か案は? – Webpervade

+0

修正がIE8と9で正しく表示されない – Webpervade

+0

興味深いIE8でChromeとSafariと全く同じように見えない – brenjt

関連する問題