html - Chrome 与 Firefox 渲染问题

Question

我在使用 Chrome、Safari 等浏览器呈现我的网站时遇到问题。在 Firefox 和较新版本的 IE 上呈现是可以接受的。我将解释我遇到的问题。

我发现的第一个问题是在 Chrome 上检查页面 ( http://devildogusainc.org ) 时。我收到以下控制台消息:

Failed to load resource: the server responded with a status of 404 (Not Found) http://devildogusainc.org/assets/js/head.min.js.map
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.devildogusainc.org/dev/img-gallery2/third.party/hammer.js/hammer.min.map
Failed to load resource: the server responded with a status of 404 (Not Found) http://devildogusainc.org/assets/css/bootstrap.css.map
Failed to load resource: the server responded with a status of 404 (Not Found) http://devildogusainc.org/assets/css/bootstrap.css.map
Failed to load resource: the server responded with a status of 404 (Not Found) http://devildogusainc.org/assets/js/head.min.js.map
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.devildogusainc.org/dev/img-gallery2/third.party/hammer.js/hammer.min.map

我不确定为什么会这样，因为我的文件都没有以 .map 结尾

我的下一期是在可扩展的下拉框中找到的。员工页面或包含它们的任何地方(索引、赞助商和支持者)存在问题。 Chrome 上的框具有根据其方向调整的指针，例如未展开时它们水平显示 (->)，展开时它们似乎向下指向内容。我将发布摘要 CSS 容器的 CSS。

summary {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
position: relative;
border-left: 10px solid #00698c;
text-shadow: 1px 1px 0 #004d66;
cursor: pointer;
display: block;
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: 22px;
text-align: center;
height: auto;
width: 350px;
margin: 0;
padding: 1.625rem;
position: relative;
background: #0099cc;
color: #fff;
}

这些是我的主要问题，其中一个困扰了我一个多星期。希望我能从 Stackoverflow 社区找到解决方案。

谢谢。

Answer 1

对于你的第一个问题:

这首先不是问题，而是 Chrome DevTools 中称为 Source Maps 的功能。 Source Maps 用于调试压缩或编译的 Javascript 和 CSS 代码，因此您不需要实际的未压缩和未编译代码。这在从其他语言(如 Coffee Script 或什至 Java(在 GWT 的情况下)编译 Javascript)时非常有用。

checkout :https://www.youtube.com/watch?v=-xJl22Kvgjg

如果您不想看到这些错误，请包含相应文件的源映射或在 Chrome DevTools 设置中禁用该功能。它们在“常规 -> 源”下的名称为“启用 Javascript 源映射”和“启用 CSS 源映射”

希望这对您有所帮助。 :)