CSS / HTML IE 7 проблем

#html #css #internet-explorer-7

#HTML #css #internet-explorer-7

Вопрос:

У меня возникли проблемы с получением чего-либо, работающего в IE 7, отлично работает во всех других браузерах, но если вы посмотрите на http://jamessuske.com/thornwood2 / в IE 7 вы заметите два разрыва между topCotent и ContentArea, а другой разрыв между ContentArea и contentBottom.

Понятия не имею, как это исправить.

HTML-КОД

 <div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->

<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->

<div class="contentArea">

</div><!--contentArea-->

<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->

<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->

КОД CSS

 .topContent{
width:1009px;
}

.leftContent{
float:left;
}

.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}

.rightContent{
float:right;
}

.bottomContent{
width:1009px;
}

Ответ №1:

Добавьте высоту к классам, как показано ниже, что устранит проблему ur для IE7

 .topContent{
  width:1009px;
  *height:37px;
}

.leftContent{
  float:left;
  *height:494px;
}


.rightContent{
  float:right;
  *height:494px;
}

Ответ №2:

<img> Элемент является встроенным элементом. Это означает, что у него есть vertical-align свойство, для которого по умолчанию установлено значение bottom . По какой-то причине это вызывает проблемы, когда у вас просто есть <img> элемент, содержащийся в элементе уровня блока (например, a <div> ).

Вот откуда ваши пробелы: по какой-то причине IE добавляет немного места в нижней части <div> элементов, содержащих эти изображения. (Это также делает это с вашим .bottomContent элементом; это просто сложнее заметить / не так важно.)

Исправление так просто, как это:

 .topContent img, .leftContent img, .contentArea img, .rightContent img {
    display:block
}

(Если по какой-либо причине вам не нравится / не можете объявить display:block , вы можете использовать vertical-align:top вместо этого.)