Таблица стилей агента Chrome перезаписывает стиль моего сайта - PullRequest
Новая
       4

Таблица стилей агента Chrome перезаписывает стиль моего сайта

22 голосов
/ 19 сентября 2011

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

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

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

enter image description here

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

@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) - неверно:

enter image description here

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

enter image description here

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

Ответы [ 6 ]

11 голосов
/ 31 октября 2012

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

7 голосов
/ 19 сентября 2011

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

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

у меня было 

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

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

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

4 голосов
/ 21 ноября 2013

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

2 голосов
/ 07 марта 2017

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

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

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

1 голос
/ 12 февраля 2017

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

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

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

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

0 голосов
/ 19 сентября 2011

Используйте общий стиль привязки CSS a: 

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

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

Кодировка должна быть установлена ​​в заголовке HTTP, к которому она относится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...