Question

我有一个WordPress网站，由于某种原因，我的某些CSS样式未在任何浏览器中应用。

event.headers.Cookie

/* This rule is rendered in the browser */
.post-date,
.author {
  font-weight: bold;
}

/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
  text-align: center;
}

@media screen and (min-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

例如，我使用的是<p class="post-date">Some published date</p> <p class="author">Author</p> <div class="wp-block-image"> <figure class="alignright is-resized"> <img src="someImgageURL" width="100" height="100"> </figure> <div>样式，没有应用。
当我在Firefox中的样式编辑器或Chrome中的Inspector中查看时，找不到样式。就像它不存在，我不知道为什么。

Answer 1

您正在使用此

：

@media screen and (min-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

这意味着具有最小宽度500px的浏览器将运行此CSS，因此此CSS会覆盖您上面的代码。

您应该使用

@media only screen and (max-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

Answer 2

大多数浏览器会将网站及其样式表，图像等缓存到安全带宽中。
这意味着您将不得不强制浏览器更新css文件，您可以通过手动删除缓存或完全禁用缓存来做到这一点！

Answer 3

也许在行之前有一些CSS语法错误。（也许打开了额外的支架或其他东西）我阅读了您写的所有评论并得出了结论。您可以使用以下方法对其进行测试。请删除CSS文件中的所有CSS代码，然后仅保留要测试的CSS部分。如果可行，请查看刚刚删除的CSS代码并检查错字。希望这对您有所帮助。谢谢

Answer 4

我终于发现了问题所在。正是Wordpress自己缓存了样式表才导致了问题。清除Wordpress缓存后，一切正常。

某些CSS样式未在Firefox，Safari或Chrome中应用

4 个答案: