Разделы
Теги | RSS © 2008 – 2022
Контакты
email:
skype:
» » гемор

Люблю я IE6 и еще 2 процента пользователей


Речь пойдет сново о багах и кул хаков для IE6.

overflow:auto и position:relative
html:
<div id="element"><div id="anotherelement"></div></div>

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

Вид в нормальных браузерах:
Люблю я IE6 и еще 2 процента пользователей

Вид в IE:
Люблю я IE6 и еще 2 процента пользователей

Фиксится это вот так:
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;
}


Непонятное отображение пустых элементов с маленькой высотой

Например мы хотим сделать в качестве разделителя пустой элемент div маленькой высоты:
css
#element{  
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}


Нормальные браузеры:
Люблю я IE6 и еще 2 процента пользователей

Но даже тут IE станет нам поперек горла:
Люблю я IE6 и еще 2 процента пользователей

Чтоб это исправить есть 2 способа:
Способ 1
#element{  
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
font-size: 0;
}

Чтоб подчеркнуть весь маразм объясню смысл фикса: «Чтоб в IE отображалось так как во всех нормальных браузерах нужно для пустого блока БЕЗ ТЕКСТА установить нулевой размер шрифта»

Способ 2
#element{  
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden
}

Комментарии, как говорится, излишни.

Минимальная высота

К сожалению min-height не корректно работает. Поэтому если вы хотите, чтоб он везде работал придется потрудится:
#element {
min-height:150px;
height:auto !important;
height:150px;
}


Проблемы с плавающими блоками

Например есть два плавающих блока с установленной шириной и в одном из них есть неразрывный текст большей ширины чем сам блок.

html:
<div id="container">
<div id="element">http://net.tutsplus.com/</div>
<div id="anotherelement"></div>
</div>

css:
#element, #anotherelement{
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;
}


В нормальных браузерах вы увидите следующее:
Люблю я IE6 и еще 2 процента пользователей

Ну а IE6 конечно же не как все:
Люблю я IE6 и еще 2 процента пользователей

Решение проблемы кроется в следующем коде:
#element{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
}
Вверх