Продолжая тему, затронутую в предыдущей заметке, я приведу один пример из книги А.Хоумера "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>