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

时间:2013-02-14 07:57:50

标签: css google-chrome google-chrome-devtools

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

最奇怪的部分是,如果查看Chrome开发工具中的来源,大约三分之一的方式变为空白(位于类名称中间),但随后您可以滚动剩下的方式,就好像文字在那里。

我正在使用以下内容将其加载到我的页面上:

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

有人碰到过这样的事吗?我已经没有什么可试的了。

3 个答案:

答案 0 :(得分:6)

文件是far from valid,应该看一下,但这是我发现的......

通过一些试验和错误,似乎在一行上连接的CSS文件看起来在使用Chrome开发者工具时已被切断。该文件似乎已被解析为使用 Ctrl + Shift + F 并在文件末尾搜索某些内容(我正在搜索zag-divider)然后Chrome会报告已找到它,尽管发现的计数似乎错了。

具体来说,这个CSS文件的任何行似乎都会被&gt; = 66,537个字符切断!例如:

  • 单行CSS文件&lt; = 66,536个字符不会被切断
  • 单行CSS文件&gt; = 66,537个字符将被截断
  • 一个多行CSS文件&gt; = 66,537个字符只有&gt; = 66,537的行将被切断

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

总而言之......一个包含任何行&gt; = 66,537个字符的CSS文件看起来好像已经在Chrome开发者工具中被切断了,尽管文件实际上已经完全加载了。我通过在Chrome应用的行末添加规则对此进行了测试。

注意:如果看似神奇的数字是2 16

,我会更开心

编辑:在Chrome 23.0.1271.97 m

上进行的调查

答案 1 :(得分:2)

对于遇到此问题但不完全使用谷歌浏览器的谷歌,可能会有用,请确认截断不是已知pitfall of Nginx and virtualization的结果,可以解决在您的服务器块中禁用sendfile的问题。

您可以在本文中找到有关此问题的更多信息:http://www.conroyp.com/2013/04/25/css-javascript-truncated-by-nginx-sendfile/

答案 2 :(得分:1)

我试过通过一些解析器运行它:

http://www.codebeautifier.com

http://www.cssportal.com/css-validator

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

从解析器提供的结果中我建议你恢复到未公开的版本并重新开始,因为我在这里看到的错误太多了(超过900个被识别出来),你试图“修复”css。 / p>