我正在谷歌Chrome浏览器上做一个网页。它以以下样式正确显示。

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文件中放入以下代码:

table {
    font-size: inherit;
}

其他回答

我只是想根据我从Ire Aderinokun那里读到的内容来扩展@BenM的回应。因为用户代理样式表提供了有用的默认样式,所以在重写它之前要三思。

我有一个愚蠢的错误,按钮元素在Chrome中看起来不正确。我对它进行了部分设计,因为我不想让它看起来像一个传统的按钮。但是,我省略了像border, border-color等样式元素。所以Chrome开始介入,提供它认为我缺少的部分。

当我添加了border: none等样式后,问题就消失了。

因此,如果其他人也有这个问题,请确保在注意到某个元素看起来不稳定时显式覆盖了所有适用的默认用户代理样式,特别是在您不想完全重置用户代理样式的情况下。这对我很管用。

在你自己的CSS内容中定义你不想从Chrome的用户代理样式中使用的值。

我有一个解决办法。检查:

错误

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

正确的

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

目标浏览器是什么?不同的浏览器会设置不同的默认CSS规则。尝试包括CSS重置,如meyerweb CSS重置或normalize.css,以删除这些默认值。谷歌“CSS重置vs正常化”来查看差异。

我有同样的问题,因为我的一个<div>'s有由浏览器设置的边距。这很烦人,但后来我发现,就像大多数人说的那样,这是一个标记错误。

我回去检查了<head>部分,我的CSS链接如下所示:

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

我在里面加入了type,并把它做成如下的样子:

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

我的问题解决了。