10 способов побороть проблемы в IE6
перевод
100
Что происходит при увеличении размера шрифта:
Как правило, увеличивается только шрифт. Ещё могут увеличиваться блоки, на которые разделён сайт (если их размеры тоже заданы в em/%), но графика не увеличивается!
Это не значит что мы должны отказаться от изменяемых размеров шрифтов!
Ведь на действительно больших мониторах, 120 dpi – не прихоть, а необходимость – плохо видно мелкий шрифт. Да и пользователь может просто захотеть увеличить размер шрифта – как на данной конкретной странице, так и вообще в настройках браузера – чтоб на всех сайтах он был крупнее.
Мы не должныобламывать людям кайфуменьшать удобство пользования сайтом. Но и сайт должен выглядеть красиво, как задумал дизайнер, ведь встречают по-одёжке.
html {font-size: 68.75%} /* базовый шрифт 11px */
@media all and (min-resolution: 120dpi) {
html {font-size: 55%} /* пропорционально уменьшаем кегль: 68.75/(120/96) */
}
#header {
scrollbar-track-color:expression(
this.runtimeStyle.scrollbarTrackColor = "#fff",
((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false
);
}
Это одноразовый 1 expression, он изменяет базовый кегль пропорционально dpi экрана.#header
– здесь может быть id любого существующего в верстке блока. Он нам нужен только чтоб «зацепиться», сам expression изменяет стили для body.scrollbar-track-color
– любое свойство которое «не жалко». Я использую проприентарное свойство IE, из семейства задающих цвет полос прокрутки. Если у элемента нет полос прокрутки (т.е. значение overflow — visible (по умолчанию) или hidden), то это свойство никак не влияет на отображение блока.screen.deviceXDPI
2 – фактическое dpi экрана в браузере.screen.logicalXDPI
3 – стандартное dpi экрана (как выставлено в винде, обычно =96)HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\
UseHR = dword:00000001
document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em'
IE 5, к сожалению, не поддерживает screen.deviceXDPI/screen.logicalYDPI, поэтому в нём этот код не сработает.
96dpi | 120dpi | 144dpi |
---|---|---|
![]() |
![]() |
![]() |
Лирическое отступление про screen.deviceXDPI, screen.logicalXDPI и Page zoom
В IE8 при включении Full-page zoom меняется значение screen.deviceXDPI. При 125% zoom оно = 120, при 150% — 144. При 100% (без масштабирования) screen.deviceXDPI возвращается к 96. При этом не имеет значения какое dpi стоит в винде.
Вот для чего нужна проверка что (screen.deviceXDPI == screen.logicalXDPI)!
Это случай — когда юзер в правом нижнем углу IE8, кликает на select Page zoom и меняет его.
А вот screen.logicalYDPI в 8-ке видимо постоянное число, у меня в тестах оно всегда было 96.
В 7-ке же и 6-ке, оба эти значения, при тестах, менялись только в зависимости от настроек винды. Page zoom в IE7 не менял значения ни того, ни другого свойства.
Я случайно обнаружил это через год после написания статьи, когда писал костыль к древнему сайту :)
Кстати Page zoom в IE8 лучше чем в IE7:
IE7 Full-page zoom:
IE8 Full-page zoom (Adaptive Zoom):
Горизонтальный скролл теперь появляется только если колонки имеет фиксированную ширину, переносы строк вставляются в новые места (после масштабирования), в общем очень похоже на то как это происходит в FF и Opera.
Механизм называется Adaptive Zoom, подробнее о нём можно почитать в блоге разработчиков IE6.
div#header {
scrollbar-track-color:expression(
this.runtimeStyle.scrolbarTrackColor = "#fff",
(((screen.deviceXDPI/screen.logicalXDPI) == 1) && (screen.deviceYDPI > 96)) ?
(
document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em',
document.body.style.zoom = screen.logicalYDPI/96
) : false
);
}
Любопытно, это редкий случай применения css свойства zoom по-назначению, а не для задания Layout.
min-resolution
.html {font-size: 68.75%} /* базовый кегль 11px==1em, все остальные наследуют значение = 11px x Xem */
@media all and (min-resolution: 120dpi) {
html {font-size: 55%}
html, x:-moz-any-link {font-size: 68.75%}
}
x:-moz-any-link
– это выбор несуществующего элемента x с псевдоклассом -moz-any-link. Такой псевдокласс понимает только Gecko-браузеры, остальные проигнорируют всю строчку7.
html {font-size: 68.75%}
@media all and (min-resolution: 120dpi) {
html {font-size: 55%}
html, x:-moz-any-link {font-size: 68.75%}
}
body,table,input,label,textarea,button,select {color: #000; font: normal 1em/1.3 Tahoma, Geneva, sans-serif}
Правило, начинающееся с body
будет проигнорировано в Opera 9.html {font-size: 68.75%} /* базовый кегль 11px==1em, все остальные наследуют значение = 11px x Xem */
@media all and (min-resolution: 120dpi) {
html {font-size: 55%}
html, x:-moz-any-link {font-size: 68.75%}
}
#for-opera927 {/* dont' remove! */}
Кстати не факт, что пользователь сам выставил 120dpi.
Он мог просто купить ноутбук, где такие настройки по-умолчанию.
html {font-size: 68.75%} /* сюда пишем размер вашего шрифта по-умочанию */
@media all and (min-resolution: 120dpi) {
html {font-size: 55%} /* пропорционально уменьшаем кегль: 68.75/(120/96) */
html, x:-moz-any-link {font-size: 68.75%} /* тут должен быть размер по-умолчанию */
}
#for-opera927 {/* dont' remove! */}
#header {
scrollbar-track-color:expression(
this.runtimeStyle.scrollbarTrackColor = "#fff",
((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false
);
}
@media all and (min-resolution: 120dpi) { ... }
хотя в доках наоборот — написано что только в presto 2.5 появилась его поддержка, а раньше не было (как же работало тогда раньше?). Я пробовал разные варианты, гуглил, искал на форуме Opera, но ничего не нашёл/не помогло.Судя по спеке — в моём коде всё верно.Обсудив с pepelsbey пришли к выводу что это глюк, баг-репорт отправлен. Теперь остаётся ждать пока Opera исправит. К счастью, на западе, где проблема 120dpi распространена, почти нет Opera, а у нас, где Opera популярна, почти нет проблемы 120dpi :)Примечания:
- Павел Корнилов: Тонкий CSS для Internet Explorer (expression)
- MSDN: deviceYDPI Property
- MSDN: logicalYDPI Property
- MSDN: Adjusting Scale for Higher DPI Screens
- MSDN: Making the Web Bigger: DPI Scaling and Internet Explorer 8
- MSDN: Internet Explorer 8 and Adaptive Zoom
- Cогласно спецификации CSS2 браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое
- MSDN: About Conditional Comments
Подробнее про то, что такое dpi: