Таблица стилей пользовательского интерфейса Chrome, переписывающая мой стиль сайта

У меня есть следующий CSS, который стилирует ссылку на одной из моих страниц:

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

Однако, когда я загружаю его, они выглядят синими в Chrome и белыми в Firefox. Инструменты Chrome dev показывают, что мой стиль якобы перезаписывает таблицу стилей пользовательского агента:

Почему он не отображается правильно? Я попытался установить кодировку в верхней части таблицы стилей:

@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 11px "Lucida Grande", Arial, Sans-serif;
}

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

input[type=email], input[type=password] {
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ACE;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 5px;
    width: 203px;
}

Но это не помогло. Моя таблица стилей связана в голове с помощью:

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

И код html для ссылок:

<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>

Это то, что они выглядят в Chrome (13.0.782) - неверно:

Вот что они выглядят в Firefox - правильно:

Похоже, что таблица стилей пользовательского агента перезаписывает мой стиль. Почему?

Ответ 1

Vonkly помог выявить проблему. Я начал копать все мои таблицы стилей, и я нашел опечатку, вроде, в одном из них - при определении стиля ссылки для заголовка отсутствовал родительский элемент, поэтому вместо

header a:link, header a:visited {
...
}

У меня был

header a:link, a:visited {
...
}

поэтому он переопределял стиль, определенный для ссылок в теле. Я, должно быть, пропустил это, рассматривая мои таблицы стилей в первый раз.

Спасибо за ваши комментарии, всем!

Ответ 2

Я не знаю, почему, но я добавляю этот <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> до <html> и он решил

Ответ 3

Просто добавьте <!DOCTYPE html> перед тегом <html>.

Ответ 4

Таблица стилей пользовательского агента запускается только в том случае, если ваш css пренебрегает определением свойства для тега. Учтите, что у вас может быть опечатка в стиле css.

Скорее всего, если вы поместите объявление тега в начало файла css, и оно работает, то у вас есть ошибка в вашем css.

Попробуйте запустить css thru CSS Lint

У меня была эта постоянная проблема и я обнаружил ошибку в моем CSS.

Ответ 5

У меня была такая же проблема, в моем случае мои некоторые классы принудительно установлены для отображения: none

Через 30/40 минут я просмотрел расширения браузера и выяснил, что все это происходило из-за Блокада AD.

поэтому, если какое-либо из вышеперечисленных решений не работает для вас, попробуйте это также один раз, если у вас есть такое расширение браузера.

Ответ 6

Спасибо Vipin Chaudhary, ваш ответ об AD Blocker был на месте!

Ответ 7

Использовать общий стиль привязки css a:

a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

Кроме того, вам не нужно устанавливать кодировку в файле css. Я бы удалил это.

Кодировка должна быть задана в HTTP-заголовке, где она принадлежит.