Chrome 与 Firefox 的渲染问题答案

【问题标题】：Chrome vs Firefox Rendering IssuesChrome 与 Firefox 的渲染问题
【发布时间】：2014-05-03 18:03:39
【问题描述】：

我在使用 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 社区找到解决方案。

谢谢。

【问题讨论】：

我没有看到带有 Chrome 的 404 错误，但我确实看到了 Uncaught TypeError: Cannot read property 'offsetWidth' of null 这可能会导致您的页面出现各种问题。
嗯，我会看看这个。
我认为这与页面的其余部分无关。该错误是 Google Map API 与联系页面集成的结果。我可能是错的，但我很有信心。

标签： html css google-chrome twitter-bootstrap firefox

【解决方案1】：

第一个问题：

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

查看：https://www.youtube.com/watch?v=-xJl22Kvgjg

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

希望这会有所帮助。 :)

【讨论】：