|
Уроки web-программирования: «Некоторые особенности разных браузеров (hover, decoration, FireFox, Op |
|
|
|
Автор megabax
|
|
25.10.2009 г. |
New Page 1
Уроки web-программирования:
«Некоторые особенности
разных браузеров (hover, decoration, FireFox, Opera)».
В
блоге мне был задан вопрос о том, что в примере из
урока 3 в браузере FireFox ссылки не
подчеркиваются. Да, действительно, подчеркнутыми оказались только посещенные
ссылки. Я переделал пример
<HTML>
<HEAD>
<TITLE>Урок 5а. Разные браузеры</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
A {text-decoration:none;}
A:hover {color:red;text-decoration:underline;}
-->
</STYLE>
<BODY>
<font size=5>
<A href=index.htm>О Компании</a><br>
<A href=news.htm>Новости</a><br>
<A href=steklom.htm>Стекломагниевый лист</a><br>
<A href=cement.htm>Цемент</a><br>
<A href=plitka.htm>Потолочная плика</a><br>
<A href=profil.htm>Профиля</a><br>
<A href=zamki.htm>Дверные замки, ручки</a><br>
<A href=siding.htm>Сайдинг</a><br>
<A href=dekor.htm>Потолочная плитка</a><br>
<A href=contacts.htm>Контакты</a><br>
</font>
</BODY>
</HTML>
|
В FireFox стало работать правильно. Так же
правильно он работает и в Opera. Хотя вид немножко
другой, в браузере Opera подчеркивание толще.
Рассмотрим еще один пример:
<HTML>
<HEAD>
<TITLE>Урок 5а. Разные браузеры</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
A:hover {
color:red;
text-decoration:underline;
}
A:link {text-decoration:none;
}
A:visited {color:green;
text-decoration:none;
}
A:visited:hover {
color:green;
text-decoration:underline;
}
-->
</STYLE>
<BODY>
<font size=5>
<A href=index.htm>О Компании</a><br>
<A href=news.htm>Новости</a><br>
<A href=steklom.htm>Стекломагниевый лист</a><br>
<A href=cement.htm>Цемент</a><br>
<A href=plitka.htm>Потолочная плика</a><br>
<A href=profil.htm>Профиля</a><br>
<A href=zamki.htm>Дверные замки, ручки</a><br>
<A href=siding.htm>Сайдинг</a><br>
<A href=dekor.htm>Потолочная плика</a><br>
<A href=contacts.htm>Контакты</a><br>
</font>
</BODY>
</HTML>
|
В нем посещенные ссылки должны отображаются зеленым, при наведении мышкой
ссылки должны подчеркиваться. Именно так и работает в IE.
Но в Opera и FireFox
отображает некорректно (при наведении подчеркивает только наведенные ссылок).
Для этих браузеров нужен вот такой текст:
<HTML>
<HEAD>
<TITLE>Урок 3. Делаем сайт</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
A {text-decoration:none;}
A:hover {color:red;text-decoration:underline;}
A:visited:hover {color:green;}
A:visited {color:green}
-->
</STYLE>
<BODY>
<font size=5>
<A href=index.htm>О Компании</a><br>
<A href=news.htm>Новости</a><br>
<A href=steklom.htm>Стекломагниевый лист</a><br>
<A href=cement.htm>Цемент</a><br>
<A href=plitka.htm>Потолочная плитка</a><br>
<A href=profil.htm>Профиля</a><br>
<A href=zamki.htm>Дверные замки, ручки</a><br>
<A href=siding.htm>Сайдинг</a><br>
<A href=dekor.htm>Потолочная плитка</a><br>
<A href=contacts.htm>Контакты</a><br>
</font>
</BODY>
</HTML>
|
Вот он работает правильно как в FireFox, так и в
Opera и IE.
К сожалению, не всегда бывает все так просто. Поскольку поведение разных
браузеров может несколько отличаться, то иногда приходиться в зависимости от
браузера выводить разный HTML. Для этого
используются различные скрипты, но до них еще дойдем. А на сегодня все. До новых
встреч.
|
|
Последнее обновление ( 24.08.2010 г. )
|
