我正在谷歌浏览器中处理一个网页。它在下列样式下显示正确。
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;
}
这些新样式中的 "字体大小 "干扰了我的设计。有没有什么方法可以强制我的样式表,如果可能的话,完全覆盖Chrome的默认样式表?
目标浏览器有哪些?不同的浏览器会设置不同的默认CSS规则。试着加入一个CSS重置,如meyerweb css reset或normalize.css,以去除这些默认规则。Google "css reset vs normalize"来看看其中的区别。
关于 "用户代理样式表 "的概念,请参考CSS 2.1规范中的级联节。
用户代理样式表会被你在自己的样式表中设置的任何东西所覆盖。它们只是底部:在没有任何由页面或用户提供的样式表的情况下,浏览器仍然必须以某种方式*渲染内容,而用户代理样式表只是描述这一点。
因此,如果你认为你有一个用户代理样式表的问题,那么你真的有一个问题与你的标记,或你的样式表,或两者(关于这一点你没有写)。