Баги в IE и их устранение

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

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

HTML:
Синтаксис: html

Синтаксис: html

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;
Синтаксис: css
}Синтаксис: css

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

Самый простой способ состоит в том, чтобы родительский элемент тоже позиционировать относительно, то есть прописать для #block position: relative.
#block{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
Синтаксис: css
}Синтаксис: css
Фиксированный размер элемента

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

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

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

Обычно в данных ситуацих поступали так: задавали параметры для всех браузеров, а потом корректировали ширину под IE5/6. Пример:
#block{
width: 400px;
height: 150px;
padding: 50px;
Синтаксис: css
}Синтаксис: css

Однако сейчас делают следующее:
#block{
width: 400px;
height: 150px;
\height: 250px;
\width: 500px
Синтаксис: css
} Синтаксис: css
Настройка минимальной ширины и высоты

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

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

Данный метод был создан Dustin Diaz. Смысл его состоит в добавлении !important.
#block {
min-height:150px;
height:auto !important;
height:150px;
Синтаксис: css
}Синтаксис: css

Второй способ:
#block {
min-height: 150px;
height: 150px;
}
html>body #block {
height: auto;
Синтаксис: css
}Синтаксис: css
Нарушение в позиционировании

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

HTML

http://net.tutsplus.com/

Синтаксис: html

Синтаксис: html

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;
Синтаксис: css
}Синтаксис: css

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

Единственный путь решения проблема состоит в том, чтобы скрыть излишки элемента, применив overflow: hidden.
#block{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
Синтаксис: css
}Синтаксис: css
Интервалы между элементами списка

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

HTML:

Синтаксис: html

CSS:
ul {
margin:0;
padding:0;
list-style:none;
}

li a {
background: #95CFEF;
display: block;
Синтаксис: css
}Синтаксис: css

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

Простой способ, который состоит в том, чтобы определить ширину самим ссылкам элементов списка.
li a {
background: #95CFEF;
display: block;
width: 200px;
Синтаксис: css
}Синтаксис: css

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

Следующий метод состоит в том, чтобы задать обтекание с левой стороны, а потом его отменить с помощью clear: left.
li a {
background: #95CFEF;
float: left;
clear: left;
Синтаксис: css
}Синтаксис: css

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

Третий метод - добавление display: inline для LI-элементов.
li {
display: inline;
Синтаксис: css
}Синтаксис: css

Источник:

net.tutsplus