What is user agent stylesheet

2019-01-01 02:54发布

I'm working on a web page in Google Chrome. It displays correctly with the following styles.

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

It is important to note that I didn't define these styles. On Chrome dev tools, it says user agent stylesheet in place of the CSS file name.

Now if I submit a form and some validation error occurs, I get the following stylesheet:

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;
}

The font-size from these new styles is disturbing my design. Is there any way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?

10条回答
人间绝色
2楼-- · 2019-01-01 03:14

Some browsers use their own way to read .css files. So the right way to beat this: If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file. Remember that the commands writen in the .html file is stronger than the command in the .css.

查看更多
弹指情弦暗扣
3楼-- · 2019-01-01 03:20

Marking the document as HTML5 by the proper doctype on the first line, solved my issue.

<!DOCTYPE html>
<html>...
查看更多
浪荡孟婆
4楼-- · 2019-01-01 03:20

I had the same problem as one of my was have margin set by the browser, it was quite annoying but then i figured out as most of the people said, its a mark up error.

I went back and checked my section and my css link was like below:

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

i included type in it and made it like below:

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

my problem was solved.

Hope it helps for some of u.

查看更多
栀子花@的思念
5楼-- · 2019-01-01 03:29

Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.

User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.

So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).

查看更多
宁负流年不负卿
6楼-- · 2019-01-01 03:30

Define the values that you don't want to be used from Chrome's user agent style in your own CSS.

查看更多
千与千寻千般痛.
7楼-- · 2019-01-01 03:33

Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults. Because you have not specified values for the table element’s box, the default styles have been applied

查看更多
登录 后发表回答