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;
}
私はこのような問題に遭遇したことがないし、任意の助けをいただければ幸いです。
あなたの返事をありがとう、それは完全に互換モードで動作しますが、IE9でも同様に動作する必要があります。何か案は? – Webpervade
修正がIE8と9で正しく表示されない – Webpervade
興味深いIE8でChromeとSafariと全く同じように見えない – brenjt