Здраствуйте. В прошлый раз мы уже разобрали 4 бага IE, сейчас разберём остальные.

Относительное позиционирование

Часто такая ситуация встречается, когда у вас имеется два вложенных контейнера. А именно родительскому вы задаёте overflow:auto, а вложенному относительное позиционирование (position: relative). В многих ситуациях это помогается, но вот IE опять решил удивить нас своей индивидуальностью.

HTML:

<div id="block"><div id="anotherblock"></div></div>

CSS:

#block{   
 background: #95CFEF;   
 border: solid 1px #36F;   
 width: 300px;   
 height: 150px;     
 margin: 30px 0;   
 overflow: auto;   
}   
#anotherblock{   
 background: #555;   
 width: 150px;   
 height: 175px;     
 position: relative;   
 margin: 30px;   
}

Устранение бага в IE

Самый простой способ состоит в том, чтобы родительский элемент тоже позиционировать относительно, то есть прописать для #block position: relative.

#block{   
 background: #95CFEF;   
 border: solid 1px #36F;   
 width: 300px;   
 height: 150px;     
 margin: 30px 0;   
 overflow: auto;   
 position: relative;   
}

Фиксированный размер элемента

Часто бывает, что при создании элементов с фиксированной высотой, элемент предстаёт не в том обличии, в котором нам хотелось, и это непростительная ошибка для IE.

Иными словами говоря, есть два DIV-элемента. Первый с фиксированными показателями, другой - без. А эта разница - это и есть ничто иное как сумма внутренних отступов, применённых для каждой стороны (padding).

Устранение бага в IE

Обычно в данных ситуацих поступали так: задавали параметры для всех браузеров, а потом корректировали ширину под IE5/6. Пример:

#block{   
width: 400px;   
height: 150px;     
padding: 50px;   
}

Однако сейчас делают следующее:

#block{ 
width: 400px;   
height: 150px;     
\height: 250px;    
\width: 500px   
} 

Настройка минимальной ширины и высоты

Указание минимальных параметров (высоты, ширины) - необходимое действие, особенно когда работаете на дизайном. К сожаление, IE полностью игнорирует данные параметры.

Первый способ:

Данный метод был создан Dustin Diaz. Смысл его состоит в добавлении !important.

#block {     
min-height:150px;   
height:auto !important;   
height:150px;   
}

Второй способ:

#block {   
min-height: 150px;    
height: 150px;   
}         
html>body #block {    
height: auto;   
}

Нарушение в позиционировании

Одним из важных действий при кодировании является правильное позиционирование элементов. Часто случается, что размер одного блока нарушается, в результате чего второй элемент уже не будет обтекать. Такое нарушение может быть вызвано какой-то длинной фразой или большим текстом.

HTML

<div id="container">
<div id="block">http://net.tutsplus.com/</div> 
<div id="anotherblock"></div>
</div>

CSS

#block, #anotherblock{   
 background: #95CFEF;   
 border: solid 1px #36F;   
 width: 100px;   
 height: 150px;     
 margin: 30px;   
 padding: 10px;   
 float: left;   
}   
  
#container{   
 background: #C2DFEF;   
 border: solid 1px #36F;   
 width: 365px;      
 margin: 30px;   
 padding: 5px;   
 overflow: auto;   
}

Устранение бага в IE

Единственный путь решения проблема состоит в том, чтобы скрыть излишки элемента, применив overflow: hidden.

#block{   
background: #C2DFEF;   
border: solid 1px #36F;   
width: 365px;      
margin: 30px;   
padding: 5px;   
overflow: hidden;   
}

Интервалы между элементами списка

IE, как это часто бывает, добавляет дополнительные вертикальные интервалы между списками элементов. Для начала посмотрим на код.

HTML:

<ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
</ul>

CSS:

ul {   
margin:0;    
padding:0;    
list-style:none;   
}   
  
li a {   
background: #95CFEF;   
display: block;   
}

Первый способ:

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

li a {   
background: #95CFEF;   
display: block;   
width: 200px;   
}

Второй способ:

Следующий метод состоит в том, чтобы задать обтекание с левой стороны, а потом его отменить с помощью clear: left.

li a {   
background: #95CFEF;   
float: left;   
clear: left;   
}

Третий способ:

Третий метод - добавление display: inline для LI-элементов.

li {   
display: inline;   
}

Источник:

net.tutsplus