Эмуляция position:fixed
html{
background: url('/0.gif') no-repeat;
background-attachment: fixed; /*избавляемся от дергания при вертикально прокрутки*/
}
#header{
width: 100%;
padding: 0.5em 0;
background-color: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
//position: absolute;
//top: expression(eval(document.documentElement.scrollTop) + 'px');
}
#content{
height:4000px;
}
<div id="header">Эмуляция fixed</div>
<div id="content">Какой-то контент</div>
Вертикальное выравнивание в CSS
#out{
height:500px;
display:table-cell;
vertical-align:middle;
}
#centered {
margin-top: expression(((outer.offsetHeight/2)-parseInt(offsetHeight)/2)<0 ? "0" : (centered.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
}
<div id="out">
<p id="centered">...</p>
</div>
Избавляемся от моргания фонового изображения в IE
body{
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
min-width и max-width в IE6
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
PNG для IE6 (не проверял)
* html img, * html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
С expression забудьте о валидации и о хорошей производительности.
Многие верстальщики сталкивались с необходимостью использования :hover в своих шаблонах. Практически всегда данный псевдокласс используется для ссылок (тег a), для которых :hover работает всегда и везде, но бывают ситуации, когда встает задача сделать подсветку для других элементов, например для div или td, и вот здесь появляется «подводный камень», известный нам как IE6. С данным браузером всегда было достаточно много проблем, но все они само собой имеют пути решения. В данном топике я приведу 3 способа реализации :hover для IE6
1) hover.htc
<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
function topm(){element.className='hover';}
function verm(){element.className='';}
</script>
Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
* {behavior:url("hover.htc")}
Либо, вот так (если хотим его применить только к конкретному элементу):
li {behavior:url("hover.htc")}
А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
li:hover ul, /* для современных браузеров */
li.hover ul { /* для Internet Explorer 6 */
display: block
}
Обратите внимание, что класс .hover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
2) SuckerFish hover
sfHover = function() {
var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
for (var i=0; i
Как пользоваться скриптом
Сначала нам нужно подключить его в шаблон либо просто вставив в его целиком
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
или же создать, допустим, файл hover.js и подключить его так
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>
Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>
<![endif]-->
В css шаблона
li:hover ul, /* для современных браузеров */
li.sfhover ul { /* для Internet Explorer 6 */
display: block
}
Обратите внимание, что класс .sfhover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/jquery-1.2.6.min.js"></script>
<![endif]-->
После этого добавить инициализацию
$('#Тут id элемента с указанием тега, требующего :hover (например, #block div) ').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
В итоге получается
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$('#block div ').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
</script
<![endif]-->
В css шаблона
#block:hover div, /* для современных браузеров */
#block.hover div { /* для Internet Explorer 6 */
display: block
}
Подводя итоги о работе данных способов можно сказать, что использование способа 3) не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа.
Способ 1) Самый минимальный в плане кода, а способ номер 2) имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так не требует использования behavior
Речь пойдет сново о багах и кул хаков для 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;
}
Вид в нормальных браузерах:
Вид в IE:
Фиксится это вот так:
#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;
}
Нормальные браузеры:
Но даже тут IE станет нам поперек горла:
Чтоб это исправить есть 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 конечно же не как все:
Решение проблемы кроется в следующем коде:
#element{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: hidden;
}
