Продолжая тему, затронутую в
предыдущей заметке, я приведу один пример
из книги А.Хоумера "Dynamic HTML: справочник",
которая сейчас активно продвигается
издательством Piter-Press. Речь идет о
совместимости шрифтов для браузеров NN и MSIE
при использовании тега <DIV>.
Небезызвестный в моем городе вебмастер
сервера jeo.ru в своем
комментарии справедливо заметил, что Netscape
понимает тег DIV в сочетании с CSS-позиционированием,
но при этом теряются свойства шрифта.
Однако, решить эту проблему оказалось
довольно просто.
Рассмотрим пример создания рельефной
надписи.
<html>
<head><title>3D title</title>
<style>
P { font-family: "Impact, sans-serif";
font-size:96; color=red }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
<body bgcolor=#408080>
<div style="position:absolute; top:5; left:5;
width:600; height:100; margin:10">
<P class=shadow>Be happy!</P>
</div>
<div style="position:absolute; top:0; left:0;
width:600; height:100; margin:10">
<P class=highlight>Be happy!</P>
</div>
<div style="position:absolute; top:2; left:2;
width:600; height:100; margin:10">
<P>Be happy!</P>
</div>
</body>
</html>
В Internet Explorer все выглядит именно так, как и
было задумано, но вот в Netscape куда-то
пропадают заданные свойства шрифта (размер
и гарнитура).
Эта проблема касается только тех свойств,
которые пишутся через дефис: font-size, font-family.
Кроме того, Netscape требует, чтобы шрифты
задавались по отдельности. Следовательно
тег <STYLE> должен выгдядеть так:
P { fontfamily: "Impact", "sans-serif"; fontsize:96;
color=red }
Правда такую конструкцию не понимает уже
Internet Explorer. Для достижения совместимости,
нужно создать универсальный набор стилей. В
нижеследующем примере первая часть
работает в обоих браузерах и определяет
цвет шрифта, вторая задает свойства для NN и
третья для MSIE.
<style>
P { color:red }
P { fontfamily: "Impact", "sans-serif"; fontsize:96 }
P { font-family: "Impact", "sans-serif"; font-size:96 }
P.highlight { color:silver }
P.shadow { color:darkred }
</style>
Все заметки: 1 2
3 4 5 6
7 8 9
11 12 оглавление
www.wmaster.ru
На
главную
СТАТЬИ
ФоруМ
