Проблема рендеринга в IE7

Question

У меня небольшая проблема с рендерингом в IE7 (как обычно). Скажем, есть элемент управления календаря, который выглядит следующим образом:

<div class="calPager">
    <input type="submit" name="prev" value="Prev" class="pagerPrev" />
    <input type="submit" name="prev" value="Next" class="pagerNext" />
    August 2009
</div>

CSS выглядит примерно так:

.calPager {
    text-align: center;
    height: 30px;
    line-height: 30px;
}

input.pagerPrev, input.pagerNext {
    height: 30px;
    text-decoration: none;
    border: none;
}

input.pagerPrev {
    float: left;
    padding-left: 28px;
    background: url(../images/calPrevArrow.png) no-repeat;
}

input.pagerNext {
    float: right;
    padding-right: 28px;
    background: url(../images/calNextArrow.png) right no-repeat;
}

В IE8 и Firefox это выглядит нормально, кнопки перемещаются влево и вправо, а месяц и год центрированы. Но IE7 не центрирует текст. Что здесь не так?

Интересно то, что если вы замените входные элементы ссылками (как я делал в другом проекте), все это прекрасно отобразится в IE7.

Еще одна небольшая проблема, инструменты разработчика IE как-то перестали распознавать все, кроме первого из моих CSS-файлов, так что это не сильно помогло. Кажется, вкладка CSS застряла на «загрузка ...». Кто-нибудь тоже сталкивался с этой проблемой?

Answer 1

Если вы поместите месяц и год в свой собственный тег уровня блока, он должен нормально работать в ie7.

<h2>August 2009</h2>

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

Я бы поместил его в какой-нибудь тег заголовка поверх div, потому что это придает ему больше смысла и цели. Div - это просто теги уровня блока, теги заголовков, такие как h2, являются тегами уровня блока, и поисковые системы видят, что они содержат важную информацию!

Answer 2

Попробуйте переместить все входные данные, поместив их в отдельные контейнеры

<div class="calPager">
   <div class="container">
       <div class="floatleft">
           <input type="submit" name="prev" value="Prev" class="pagerPrev" />
       </div>
       <div class="floatright">
           <input type="submit" name="prev" value="Next" class="pagerNext" />
       </div>
   </div>
</div>

.container{
    margin-left:auto;
    margin-right:auto;
    width: .. (if you like);
    /**/
}

.floatleft { 
    float:left;
}

.floatright {
    float:right;
}