6 expression для IE6

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Внимание:

До 15 июля нахожусь в отпуске. Однако, если вы заинтересованы, чтобы работу выполнил именно я, то можете воспользоваться ссылкой справа и написать мне письмо. Я ознакомлюсь с задачей, сообщу сроки и цену и предположительное время начала работы.

Заказать мне работу

24.12

6 expression для IE6

Комментарии (8) CSS, HTML

1. Эмуляция CSS-свойства content: ul li {
margin: 0.5em 0; padding: 0 0 0 20px;
list-style-type: none;
behavior: expression( !this.before ? this.before = this.innerHTML = '— ' + this.innerHTML : '' );
text-indent: -1.24em;
}
ul li:before { content: '\2014\a0'; }
2. Эмуляция position:fixed: body{
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(
document.getElementsByTagName( 'body' )[0].scrollTop + "px"
);
}

#content{
height:4000px;
}; <div id="header">Эмуляция fixed</div>
<div id="content">Какой-то контент</div>
3. Вертикальное выравнивание в 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>
4. Избавляемся от моргания фонового изображения в IE: Если для элемента указан background-image в CSS, то при событии hover на этом элементе ИЕ6 будет каждый раз снова и снова подгружать картинку с сервера, а не использовать ту которую он сохраняет в кеше.
Лечим.; body{
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
5. 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");
}
6. 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)
);
}

Метки:CSS, HTML

1
pepelsbey (25.12.2007) #
Неплохие примеры на эту тему:

http://lusever.livejournal.com/15868.html

…и много кода с комментариями:

http://lusever.ru/proceedings/thin_css/ie6.css
2
FX Poster (25.12.2007) #
Ух ты. Спасибо. 1 и 2 не знал.
3
lohmatyi (25.12.2007) #
Огромное спасибо!!
Но 5 лекарство повесит IE.. надо примерно так:

#container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 602? "600px" : document.body.clientWidth > 1202? "1200px" : "auto"); }
4
le`Mur (26.12.2007) #
pepelsbey, да я в курсе. Только это не примеры, а скорее дополнение: как сделать expression еще удобнее.

FX Poster, всегда пожайлуста )

lohmatyi, вы пробовали? Единственно когда это вешает IE, если вы ставите expression на body с выставленными padding. Разумеется при соответствующей декларации.

Ну а уж если совсем вдаваться в совместимость, то лучше делать так.
```
width:expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 770 ? "770px" : (document.documentElement.clientWidth > 990 ? "990px" : "auto")) : (document.body.clientWidth < 770 ? "770px" : (document.body.clientWidth > 990 ? "990px" : "auto")));
```
5
lusever (26.12.2007) #
6 — оригинальный способ все таки более правильный http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/
6
le`Mur (26.12.2007) #
lusever, в смысле? Один в один.
7
lusever (26.12.2007) #
Там вначале behavior переопределяется.
8
le`Mur (26.12.2007) #
Ты прав. Зря я за обсуждением перестал следить, сначала azimuth был и без переопределения.

Оставить комментарий

Имя (обязательно)

E-mail (не публикуется) (обязательно)

Сайт

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте
<code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, css, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на <