Добрый вечер, друзья! Internet Explorer - это та преграда, на который спотыкаются многие разработчики. Вы можете потратить много времени, но в результате получите кривое отображение в данном браузере, и все ваши разработки падут прахом. Казалось бы, что данный браузер и использовать никто не будет, однако существует много пользователей, которые активно его юзают. Поэтому наша задача - разобрать все эти IE-баги и найти пути и решения.

Центрирование

Центрирование элементов страницы - это один из часто встречаемых возможностей на страницах. Центрирование использует повсюду: выравние блоков, изображений, слоёв. Самым из простых способов создания центрирования является добавление следующий строки:

margin:auto;

Данный метод применим ко многие элементам и не зависит от ширины или браузера. Но вот старый добрый IE не попадает под этот разряд.

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

Самая простая методика решения данного бага в Internet Explorer - прописывание text-align: center "родительскому" контейнеру (в нашем случае "родительский" - поле серого цвета) и применение text-align: left для элемента, который подлежит центральному выравниванию.

#container{   
 border: solid 1px #000;   
 background: #777;   
 width: 400px;   
 height: 160px;   
 margin: 30px 0 0 30px;   
 text-align: center;   
}   
  
#element{   
 background: #95CFEF;   
 border: solid 1px #36F;   
 width: 300px;   
 height: 100px;   
 margin: 30px 0;   
 text-align: left;         
}

Эффект лестницы

Каждый кодер при создании пользуется списками для создания навигации. Для этого мы создаём список, а в контейнер тега LI вставляем ссылки, а после всё это позиционируем. Но вот IE этого не воспринимает, эму другое блюдо подавай (: Например:

HTML:

<ul>
<li><a href="#">анкор</a></li>
<li><a href="#">анкор</a></li>
<li><a href="#">анкор</a></li>
</ul>

CSS:

ul { 
list-style: none; 
} 
ul li a { 
display: block; 
width: 130px; 
height: 30px; 
text-align: center; 
color: #fff; 
float: left; 
background: #95CFEF; 
border: solid 1px #36F; 
margin: 30px 5px; 
}

В идеале должны получить:

Правильная позициоривание элемента в навигации

Но в IE:

Первый способ устранения бага

Для этого мы добавляем плавающее позиционирование самому тегу LI:

ul li {
float: left;
}

Второй способ устранения бага

Для этого прописываем display: inline. В добавок к этому, данный способ исправляет ещё и ошибку с краями, описанную ниже.

ul li {
display: inline;
}

Двойной отступ в плавающих элементах

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

CSS:

#block{ 
 background: #95CFEF; 
 width: 300px; 
 height: 100px; 
 float: left; 
 margin: 30px 0 0 30px;
}

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

Для этого добавляем display: inline в CSS

#block{ 
 background: #95CFEF; 
 width: 300px; 
 height: 100px; 
 float: left; 
 margin: 30px 0 0 30px;
 display: inline;
}

Элементы с маленькой высотой

Ссысл состоит в том, что при создании элемента с маленькой высотой (например, в 2 пикселя) мы получим блок с большей высотой.

CSS:

#block{ 
 background: #95CFEF; 
 border: solid 1px #36F; 
 width: 300px; 
 height: 2px; 
 margin: 30px 0;
}

Правильное отображение элементов с маленькой высотой

Баг отображения элементов с маленькой высотой в IE

Первый способ устранение бага:

Причина этой ошибки довольно проста: IE просто отказывается изменить высоту элемента, меньшего чем размер шрифта. Для этого нужно изменить размер шрифта на 0.

#block{ 
 background: #95CFEF; 
 border: solid 1px #36F; 
 width: 300px; 
 height: 2px; 
 margin: 30px 0;
 font-size: 0; 
}

Второй способ устранение бага:

Следующий более лучший путь решения состоит в том, чтобы скрыть лишнее, прописав overflow: hidden

#block{ 
 background: #95CFEF; 
 border: solid 1px #36F; 
 width: 300px; 
 height: 2px; 
 margin: 30px 0;
 overflow: hidden;
}

Оставшиеся баги разберём в следующем посте.

Источник:

net.tutsplus

Постовой

Нет на блоге посетителей? Вы еще не знаете, что такое SEO оптимизация? Пора изучать продвижение блога и занимать высокие позиции в поисковых системах.