Рейтинг@Mail.ru
    Работа \ Обучение \ Web-программирование - это просто. Урок 6а. Разные браузеры

    Web-программирование - это просто. Урок 6а. Разные браузеры

    Тема сегодняшнего урока: «Разные браузеры».

     

    В блоге мне был задан вопрос о том, что в примере из урока 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. Для этого используются различные скрипты, но до них еще дойдем. А на сегодня все. До новых встреч.

    Другие мои уроки вы можете найти здесь



    Теги: WEB , HTML , CSS , STYLE , программирование , сайт , дизайн , браузер , Opera , IE , FireFox
    Смотрели:

    всего 8992 раза



    Нравится

    Комментарии: Добавить комментарий

    Пока нет комментариев.

    Добавьте ваш комментарий:

    Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.