Что такое таблица стилей агента пользователя

Я работаю над веб-страницей в Google Chrome. Он отображается правильно со следующими стилями.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

важно отметить, что я не определил эти стили. На Chrome dev tools, он говорит таблица стилей агента пользователя вместо имени файла CSS.

Теперь, если я отправляю форму и возникает ошибка проверки, я получаю следующую таблицу стилей:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

на font-size из этих новых стилей нарушает мой дизайн. Есть ли способ чтобы заставить мои таблицы стилей и, если возможно, полностью перезаписать таблицу стилей Chrome по умолчанию?

10 ответов


Что такое целевой браузер? Разные браузеры устанавливают разные правила CSS по умолчанию. Попробуйте включить сброс.в CSS или нормализуется.в CSS (Google для одного или для" reset vs normalise", чтобы увидеть различия), чтобы удалить эти значения по умолчанию.


Что касается понятия "таблица стилей агента пользователя", обратитесь к разделу Каскад в спецификации CSS 2.1.

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

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


Если <!DOCTYPE> отсутствует в вашем html вы можете столкнуться с тем, что браузер отдает предпочтение "таблице стилей агента пользователя" над пользовательской таблицей стилей. Добавление параметра "DOCTYPE" исправляет это.


пометка документа как HTML5 соответствующим doctype в первой строке решила мою проблему.

<!DOCTYPE html>
<html>...

в основном, таблица стилей по умолчанию, предоставляемая браузером. Из спецификации...

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

Также см. Дополнительные сведения об агенте пользователя в целом...

https://www.w3.org/TR/UAAG20/#def-user-agent


определите значения, которые вы не хотите использовать из стиля агента пользователя Chrome в вашем собственном CSS.


некоторые браузеры используют свой собственный способ чтения .файл CSS. Так что правильный способ победить это: Если ввести командную строку непосредственно в поле .HTML исходный код, это бьет .css-файл, таким образом, Вы сказали браузеру напрямую, что делать, и браузер находится в положении, чтобы не читать команды из .файл CSS. Помните, что команды записываются в the .html-файл сильнее, чем команда в .стиль CSS.


каждый браузер предоставляет таблицу стилей по умолчанию, называемую таблицей стилей агента пользователя, в случае, если HTML-файл не указывает ее. Заданные стили переопределяют значения по умолчанию. Поскольку вы не указали значения для поля элемента таблицы, были применены стили по умолчанию


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

Я вернулся и проверил свой раздел, и моя ссылка css была похожа ниже:

<link rel="stylesheet" href="ex.css">

Я включил в него тип и сделал его, как показано ниже:

<link rel="stylesheet" type="text/css" href="ex.css">

моя проблема была решена.

надеюсь, что это поможет для некоторых из u.


поместите следующий код в файл CSS

table {
    font-size: inherit;
}