Стили и браузеры
Тот, кто попробовал работать со стилями, понял, насколько это удобный и мощный инструмент. Однако, у всякого плюса есть и минусы. Минус стилей в том, что разные браузеры относятся к стилям по разному. В принципе, добиться одинакового результата можно почти всегда в разных браузерах, но – нужно поработать.
Вот пример из личной практики – в нем наша ссылка (поместим ее в ячейку таблицу в 100 рх) должна выглядеть в прямоугольнике. Цвет прямоугольника вместе с цветом текста должен изменяться под мышкой.
(Примем во внимание, что заданы у нас и другие стили для других ссылок)
CODE:<a href="моя страница.htm" class="mn">Пример </a>
<a href="моя страница1.htm" class="mn">Пример1 </a>
Чтобы все это правильно отображалось в Опере (7.23) достаточно так
CODE:<style type="text/css">
<!--
a.mn {
width: 100%;
font-family: Verdana;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #99620F;
text-decoration:none;
margin: 0px 1px 1px;
padding-left: 4px;
}
a.mn:hover {
color: #FFFFFF;
background-color: #000000;
}
-->
</style>
А ИЕ (6.0) поймет не все. Этому браузеру необходимо еще указать конкретно стиль ссылки
CODE:<style type="text/css">
<!--
a.mn:link, a.mn:active, a.mn:visited {
width: 100%;
font-family: Verdana;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #99620F;
text-decoration:none;
margin: 0px 1px 1px;
padding-left: 4px;
}
a.mn:hover {
color: #FFFFFF;
background-color: #FFFFFF;
}
-->
</style>
Все у нас работает. Но в Нетскейпе (7.0) картинка выглядит страшновато – наш прямоугольник не растягивается на всю ширину ячейки, а только обрисовывает буковки. Для этого браузера нужно указать еще один параметр – «прижмем» нашу ссылку к правому краю
CODE:<style type="text/css">
<!--
a.mn:link, a.mn:active, a.mn:visited {
width: 100%;
font-family: Verdana;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #99620F;
text-decoration:none;
margin: 0px 1px 1px;
padding-left: 4px;
float: right;
}
a.mn:hover {
color: #FFFFFF;
background-color: #000000;
}
-->
</style>
Все хорошо, но ІЕ вдруг перестает показывать правую рамку ячейки.
Экспериментируем, оказывается нужно установить вот так:
CODE:margin: 1px 0px 0px;
Прошу знающих: дополните (всегда есть чем) и поправьте (если нужно)