Неправильное выравнивание плавающих элементов в IE9 - PullRequest
Новая
       15

Неправильное выравнивание плавающих элементов в IE9

0 голосов
/ 12 июля 2011

У меня возникают проблемы с плавающими div в IE9. Второй 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;
}

Я никогда не сталкивался с подобной проблемой, и любая помощь будет признательна.

1 Ответ

0 голосов
/ 12 июля 2011

Попробуйте использовать IE9 в режиме совместимости.По какой-то причине есть такая опция, и часто это единственный способ исправить глупые проблемы, относящиеся только к IE9.

...