Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки HTML arrow Уроки web-программирования:  «Некоторые особенности разных браузеров (hover, decoration, FireFox, Op
27.02.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования:  «Некоторые особенности разных браузеров (hover, decoration, FireFox, Op Печать E-mail
Автор 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 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги