Тонкий css для internet explorer Павел Корнилов. Браузеры
TRANSCRIPT
Тонкий CSS дляInternet Explorer
Павел Корнилов
Браузеры
Internet Explorer
Ошибки
HTML
• <img alt=“alt”/>
• <label>Имя: <input/></label>
• PNG
CSS
• :hover
• opacity
• inherit
• :first-child
Решения
• DHTML Behaviors
• expression
• Иногда верстать таблицами
DHTML Behaviors
Подключение:behavior: url(behavior.htc);
Внутри:jScript или VBScript
Whatever:hover
body { behavior: url(hover.htc) }
Лечит::hover
:active
IE PNG Fix
img, div { behavior: url(iepngfix.htc) }
Лечит альфа прозрачность у PNG:картинки
фон
Expression
.mydiv {
a: expression(alert(), b, c = 1);
}
Что это за конструкция?
Особенность
• Исполняется при каждом действии пользователя
• После каждого блока ставится запятая
• with(this), this - необязателен
В ней работает
• Вызов функции
• Анонимные функции
• Присваивание переменной
• (true) ? 1 : 2
• комментарии // и /**/
• Конкатенация
Не работает
• Точка с запятой
• if … else
• Иногда, пробелы
function expression() {
// колдовской код
}
Похоже?
Style
Три способа:
• style
• currentStyle
• runtimeStyle
Примеры
Вспомните JavaScript
alt и title
img
{
behavior: expression(
(this.alt&&!this.title) ? this.title = '' : ''
)
}
alt и title
img
{
behavior: expression(
(alt&&!title) ? title = '' : ''
)
}
alt и title
img
{
behavior: expression(
(alt&&!title) ? title = '' : '', runtimeStyle.behavior = 'none'
)
}
alt и title
img
{
behavior: expression(
runtimeStyle.behavior = 'none',
(alt&&!title) ? title = '' : ''
)
}
alt и title
img
{
scrollbar-face-color: expression(
runtimeStyle.scrollbarFaceColor = '#fff',
(alt&&!title) ? title = '' : ''
)
}
background и png
filter: expression(
(runtimeStyle.filter == '') ?runtimeStyle.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=crop)'
:
runtimeStyle.filter,
runtimeStyle.backgroundImage = 'none'
)
IMG и PNG
filter: expression(
(runtimeStyle.filter==''&&className!='ie')?
(h = this.insertAdjacentHTML('afterEnd', '<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+src+',sizingMethod=scale);
zoom:1"><img width="'+width+'" height="'+height+'" src="'+src+'" alt="" style="visibility:hidden;display:block" class="ie"/></span>'), style.display = 'none‘)
:
'',
runtimeStyle.filter = 'none'
)
Павел
Корнилов http://lusever.livejournal.com/