Understand the role of user agent style sheets
P粉277464743
2023-08-27 13:14:56
<p>I'm working on the page in Google Chrome. It displays the following styles correctly. </p>
<pre class="brush:php;toolbar:false;">table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}</pre>
<p>Note that I did not define these styles. In the Chrome Developer Tools, it replaces the CSS filename with <strong>User Agent Stylesheet</strong>. </p>
<p>Now, if I submit the form and some validation errors occur, I get the following stylesheet: </p>
<pre class="brush:php;toolbar:false;">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;
}</pre>
<p>The <code>font-size</code> in these new styles disrupts my design. Is there a way to force my stylesheet, if possible, to completely override Chrome's default stylesheet? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If
is missing from your HTML content, you may experience the browser prioritizing the "User Agent Style Sheet" over your custom style sheet. Adding a document type solves this problem.What is the target browser? Different browsers set different default CSS rules. Try adding a CSS reset, such as meyerweb CSS reset or normalize.css, to remove these default values. Google "CSS reset vs normalize" to see the difference.