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?
Answer
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb css reset or normalize.css, to remove those defaults. Google "css reset vs normalize" to see the differences.
No comments:
Post a Comment