只有部分 CSS 文件在 Chrome 中加载答案

【问题标题】：Only part of CSS file is getting loaded in Chrome只有部分 CSS 文件在 Chrome 中加载
【发布时间】：2023-03-30 01:52:01
【问题描述】：

由于某种原因，我的页面只加载了一部分（大约是我的 CSS 文件的 1/3）。它是一个连接和缩小的。如果我去 http://staging.easyuniv.com/styles/dbf42ab5.main.css 我可以看到整个事情。

最奇怪的部分是，如果查看 Chrome 开发工具中的源代码，大约三分之一的地方会变成空白（就在类名的中间），但是你可以滚动剩下的地方，就好像文本在那里。

我正在将其加载到我的页面上：

<link rel="stylesheet" href="styles/dbf42ab5.main.css">

有人遇到过这样的事情吗？我已经没有东西可以尝试了。

【问题讨论】：

【解决方案1】：

该文件是 far from valid，可能应该查看它，但这是我发现的……

经过反复试验，单行连接的 CSS 文件似乎在使用 Chrome 开发者工具时被截断了。该文件似乎已被解析为使用 Ctrl+Shift+F 并在文件末尾搜索某些内容（我正在搜索zag-divider) 然后 Chrome 报告它已找到，尽管找到的计数似乎错误。

具体来说，这个CSS文件的任何行>= 66,537个字符似乎都会被截断！例如：

我有一行正好 66,537 个字符的 CSS 被截断，但是通过在第一个选择器和重新加载后添加一个回车符，整个文件在控制台中正确显示。

总而言之……任何行 >= 66,537 个字符的 CSS 文件看起来像是在 Chrome 开发者工具中被截断了一部分，尽管该文件实际上已完全加载。我通过在 Chrome 应用的行尾添加一条规则来测试这一点。

注意：如果这个看似神奇的数字是 2¹⁶

，我会更开心

编辑：在 Chrome 23.0.1271.97 m 上进行的调查

【讨论】：

+1 进行精彩分析！
所以每行有字符限制？？确实有好的指针+1
@Monkieboy 似乎在 Chrome 开发工具中每行都有 display 限制（或错误！）。整行的 CSS 似乎仍然正确应用
@andyb 这些似乎都是 twitter bootstrap 中的错误。但我已经多次使用 bootstrap（其他人也是如此），它工作正常。我通过验证器并得到相同数量的错误

【解决方案2】：

对于遇到此问题但并非专门使用 Google Chrome 的谷歌用户，验证截断不是由已知的 pitfall of Nginx and virtualization 造成的可能很有用，这可以通过在您的服务器块中禁用 sendfile 来解决。

【讨论】：

【解决方案3】：

我已经尝试通过一些解析器运行它：

不幸的是，它们似乎无法完全阅读您的 css 文件，您应该通过它们运行 css，因为结果太大而无法在此处发布。我认为当你缩小时可能会发生很多事情，错误的编码，实际需要的空格移动。

根据解析器提供的结果，我建议您恢复到未缩小的版本并重新开始，因为我在这里看到的错误太多（已识别出超过 900 个），您无法尝试“修复”css。

【讨论】：