HTML / CSS: <a>тег CSS правила с рендерингом псевдоклассов - PullRequest
Новая
       13

HTML / CSS: <a>тег CSS правила с рендерингом псевдоклассов

7 голосов
/ 31 марта 2011

В последнее время я сталкивался с проблемой, связанной с моими проектами веб-дизайна, которая была настолько незначительной, что несколько раз проскальзывала сквозь пальцы, но это становилось слишком раздражающим.с этими правилами: 

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Ссылки в моем документе будут , только иногда будут иметь правильные цвета, но иногда они будут просто синими> фиолетовыми ссылками по умолчанию.Я на черном фоне, поэтому они выглядят ужасно.

Если я обновлю страницу, примерно в половине раз они будут отображаться правильно.Это происходит как в Firefox, так и в Chrome.

Что происходит?

Ответы [ 3 ]

4 голосов
/ 31 марта 2011

Если вы сейчас разрабатываете свой css, вполне возможно, что браузеры имеют кешированную версию неправильной версии таблицы стилей, что объясняет, почему ваши ссылки не отображаются правильно.

Попробуйтеследующее: в вашей ссылке на css добавьте строку запроса со значениями мусора.Это приведет к повторной загрузке CSS и посмотрите, применяются ли ваши правила последовательно.Если они это сделают, то вы знаете, что это проблема кеширования.Оставьте строку запроса как есть, и ваши пользователи повторно загрузят CSS.Если нет, то у вас есть проблема с CSS.Загрузите Firebug для Firefox, проверьте одну из ссылок, которая не отображает правильный цвет, и посмотрите, какие правила применимы к нему.

Вот как бы вы добавили строку запроса: 

<link rel="stylesheet" type="text/css" href="style.css?v=3">
1 голос
/ 01 ноября 2012

Конечно, это старый пост, но в последнее время я сталкиваюсь с такими же проблемами. После нескольких часов поиска я наконец понял, что моя разметка недействительна, поскольку использовал следующий синтаксис: 

<a href="somlink"><i>my link text</i></a>

Это прекрасно воспроизводится во всех браузерах, но, конечно же, селектора 'a' в моей таблице стилей было недостаточно. В этом случае мне нужно было следующее: 

   a i, a:hover i, a:visited i
   {
       some rule....
   }

Надеюсь, это кому-нибудь поможет ...

0 голосов
/ 31 марта 2011

Звучит очень странно.

Прежде всего, я бы положил color на вашу базу a, чтобы соответствовать a:link и a:visited: 

a {
    outline: 0;
    text-decoration: underline;
    color: #0099FF;
}

Это должно применяться к каждому тегу привязки, который он находит. если у вас есть тег привязки без href, a:link не будет применяться.

...