javascript - CSS 渲染不正确;可能链接的 JS/CSS 资源过多?

标签 javascript html css wordpress browser

<分区>

我得到了一些关于“修复 CSS 问题”的说明,这些说明是基于 WordPress 的网站。我的一位同事正在我们的开发环境中对这个网站进行更改。我相信除了对模板和网站内容进行一些小改动外,他还切换到了不同的主题。

第一次导航到该网站时,很明显有一些损坏的 CSS 正在运行。

快速查看源代码,我可以看到有大量链接的 JavaScript 和 CSS 文件。我有两个理论:

  1. 可能在各种样式表使用的 ID 和/或类中存在一些重叠,这导致了页面呈现中的不良结果。

  2. 浏览器发送的 HTTP 请求过多,导致其中一些请求被忽略。这有可能吗?

似乎是什么问题,我应该如何解决这个问题?

Here is an image of the problem. 编辑:

我最初发布网站链接有两个原因:

  1. 这不是一蹴而就的事情。
  2. 我觉得如果人们能够自己访问该页面并检查问题,我的问题得到解答的可能性会更大。

有人觉得我应该删除链接,所以我尊重他们的要求并用图片替换它。

没关系。您可以在图片中看到问题,并且可以在右侧瞥见包含了多少 JS/CSS 文件。如果你真的很想看这个网站,你可以通过足够的挖掘来弄明白。

无论如何,也许我 react 过度了,但我认为投票决定删除这篇文章是相当苛刻的。我和其他试图回答我的问题的人一样是一名用户。这不是我的网站。除了我想修复此问题之外,我发布此帖子没有任何欺骗性的潜在动机。

最佳答案

我认为这里最好的方法是使用 Google Chrome 中的 Developer Console 或 Mozilla Firefox 中的 Firebug 扩展来调查问题。

首先打开网络标签并刷新您的页面。您将看到所有加载的资源。这样你就可以检查你的第一个理论(如果没有加载一些 CSS 资源)。虽然,我从未听说过 CSS 资源的数量有限制。

其次,打开元素 选项卡并选择页面上有问题的元素。使用右侧的 Styles 面板来调查 CSS 实际发生的情况。您将能够看到哪些规则来自哪些文件以及哪些规则被覆盖。

作为一个好建议 - 考虑从页面中删除所有无关的元素和资源。只留下最低限度。这样你会更容易找到问题所在。您以后可以添加其他资源,一次添加一个。此外,请考虑禁用 JavaScript - 这将帮助您将静态 CSS 问题与动态问题隔离开来。

考虑到您问题的格式和缺乏示例,我不能更具体。如果您提供更多详细信息或更具体的问题,我将很乐意更新和扩展我的回答。

更新#1:

考虑到您的恶意软件问题。尝试找到所有受影响的文件(被注入(inject)损坏的文件),从您的 HTML 开始并向 JavaScript 努力。然后用原始文件替换所有损坏的文件。例如重新下载一个主题。

同时考虑检查您的元素中是否存在无关的 PHP 文件。最近,我自己在安装一个 WordPress 时遇到了一个问题:有一个 PHP 文件被注入(inject)到一个主题目录中,该目录从我们的服务器发送了大量的垃圾邮件。讨厌。

希望对你有帮助,干杯!

关于javascript - CSS 渲染不正确;可能链接的 JS/CSS 资源过多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23500194/

相关文章:

javascript - 对象不是函数

javascript - 在 Sharepoint 2013 中使用 Javascript 时出现空引用类型错误

javascript - 动态关闭 &lt;input&gt; 的自动填充菜单

javascript - 如何从节点列表访问 HTML 元素的内容?

html - 如何将 css 应用于 html 以使其显示为样式属性

css - Bootstrap + Font Awesome + IE7 = 带图标的按钮上没有标题

javascript - Vue/Nuxt.js - 计算嵌套 JSON 值的总值

java - Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

html - 从 flex 子项中删除下划线

html - overflow hidden 时在 Webkit/mozilla 中滚动