What is user agent stylesheet

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?

---

What is the target browser? Different browsers set different default CSS rules. Try including a reset.css or a normalise.css (Google for either one or for "reset vs normalise" to see the differences) to remove those defaults.

---

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).

---

If <!DOCTYPE> is missing in your html you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.

链接地址: http://www.djcxy.com/p/58738.html

上一篇: 如何在CSS文件中导入Google Web Font？

下一篇: 什么是用户代理样式表