Я работаю над веб-страницей в Google Chrome. Он отображается правильно со следующими стилями.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Важно отметить, что я не определял эти стили. В инструментах разработчика Chrome вместо имени файла 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 по умолчанию?
css
google-chrome
Капил Шарма
источник
источник
Ответы:
Какие целевые браузеры? Различные браузеры устанавливают разные правила CSS по умолчанию. Попробуйте включить сброс CSS, такой как сброс настроек meyerweb CSS или normalize.css , чтобы удалить эти значения по умолчанию. Google "CSS сброс против нормализации", чтобы увидеть различия.
источник
<!DOCTYPE>правильное @SebasЕсли
<!DOCTYPE>в вашем HTML-контенте отсутствует, вы можете столкнуться с тем, что браузер отдает предпочтение «таблице стилей агента пользователя» по сравнению с вашей пользовательской таблицей стилей. Добавление doctype исправляет это.источник
Что касается понятия «таблица стилей агента пользователя», обратитесь к разделу « Каскад» в спецификации CSS 2.1.
Таблицы стилей агента пользователя переопределяются всем, что вы устанавливаете в своей собственной таблице стилей. Они просто на пределе: в отсутствие каких-либо таблиц стилей, предоставленных страницей или пользователем, браузер все равно должен каким-то образом визуализировать контент , а таблица стилей пользовательского агента просто описывает это.
Так что, если вы думаете, что у вас есть проблема с таблицей стилей пользовательского агента, то у вас действительно есть проблема с вашей разметкой, или вашей таблицей стилей, или обоими (о которых вы ничего не написали).
источник
liэлемент, содержащий дваulэлемента только с текстовым содержимым; они стилизованы таблицей стилей агента пользователя, но этот стиль можно переопределить. (От того, является ли разметка недействительной, зависит от контекста и версии HTML; но это не влияет на стилизацию.)liэлемента, и ваша таблица стилей не переопределяет его.Маркировка документа как HTML5 с помощью правильного типа документа в первой строке решила мою проблему.
источник
Таблица стилей агента пользователя представляет собой «таблицу стилей по умолчанию», предоставляемую браузером (например, Chrome, Firefox, Edge и т. Д.), Чтобы представить страницу так, чтобы она соответствовала «общим ожиданиям при представлении». Например, таблица стилей по умолчанию предоставит базовые стили для таких вещей, как размер шрифта, границы и расстояние между элементами. Обычно используется таблица стилей сброса для устранения несоответствий в браузерах.
Из спецификации ...
Для получения дополнительной информации о пользовательских агентах в целом см. Пользовательский агент .
источник
Отвечая на вопрос в заголовке, что такое таблица стилей агента пользователя, набор стилей по умолчанию в браузере: Вот некоторые из них (и наиболее важные из них также в современной сети):
Геккон (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Хром (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Личное мнение: не борись с ними. Они имеют хорошие значения по умолчанию, например, в случаях RTL / BIDI и являются согласованными в настоящее время. Сбросить то, что вы видите не относящимся к вам, не все из них сразу.
источник
Определите значения, которые вы не хотите использовать, из стиля пользовательского агента Chrome в своем собственном контенте CSS.
источник
Некоторые браузеры используют свой собственный способ чтения файлов .css. Таким образом, правильный способ справиться с этим: если вы вводите командную строку непосредственно в исходном коде .html, это лучше, чем файл .css, таким образом, вы прямо указали браузеру, что делать, и браузер находится в состоянии не читать команды из файла .css. Помните, что команды, записанные в файле .html, сильнее, чем команды в файле .css.
источник
У меня была та же проблема, что и у одного из моих <div> полей, установленных браузером. Это было довольно неприятно, но потом я понял, что большинство людей сказали, что это ошибка разметки.
Я вернулся и проверил мой раздел <head>, и моя CSS-ссылка была такой:
<link rel="stylesheet" href="ex.css">Я включил
typeэто и сделал это как ниже:<link rel="stylesheet" type="text/css" href="ex.css">Моя проблема была решена.
источник
Каждый браузер предоставляет таблицу стилей по умолчанию, которая называется таблицей стилей пользовательского агента, в случае, если файл HTML не указывает ее. Заданные вами стили переопределяют значения по умолчанию.
Поскольку вы не указали значения для поля элемента таблицы, были применены стили по умолчанию.
источник
Я просто хотел бы расширить ответ от @BenM на основе того, что я прочитал здесь от Ire Aderinokun. Поскольку таблица стилей пользовательского агента предоставляет полезные стили по умолчанию, дважды подумайте, прежде чем переопределять ее.
У меня была глупая ошибка, когда элемент кнопки не выглядел правильно в Chrome. Я частично разработал его, потому что не хотел, чтобы он выглядел как традиционная кнопка. Тем не менее, я пропустил такие элементы стиля, как border, border-color и т. Д. Поэтому Chrome вмешался, чтобы предоставить детали, которые, по его мнению, мне не хватало.
Проблема ушла, когда я добавил такие стили, как
border: noneи т. Д.Поэтому, если у кого-то еще возникла эта проблема, убедитесь, что вы явно переопределяете все применимые стили пользовательского агента по умолчанию для элемента, если заметите, что он выглядит странно, особенно если вы не хотите полностью сбрасывать стили пользовательского агента. Это сработало для меня.
источник
У меня есть решение. Проверь это:
ошибка
Правильный
источник
Поместите следующий код в ваш файл CSS:
источник