Question

我在IE9中遇到浮动div的问题。第二个div（在添加了边框之后）似乎被分成了两个，尽管它是一个带有标题标记和无序列表的div。标题标记正确显示，而列表被推到第一个div下面，其他div然后浮动到列表旁边。如果我删除了包含列表的div，则下一个div会发生同样的事情;标题显示正确，但图像被推到第一个div下方。看看网站：http://www.greenhomesofmaine.com/向下滚动到页脚。 IE9是唯一导致div失真的浏览器。

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;
}

我从未遇到过这样的问题，我们将不胜感激。

Answer 1

尝试在兼容模式下使用IE9。无论出于何种原因，都有这个选项，很多时候这是解决仅与IE9相关的愚蠢问题的唯一方法。

浮动div在IE9中未正确对齐

1 个答案: