在github-pages上以不同方式呈现的页面布局

Question

我在github页面上创建了一个用户站点。对于布局，我使用yui来指定比例。在本地查看(在浏览器中打开index.html )时，布局似乎可以正确呈现，但从deployed github-pages打开时却无法正确呈现。

例如，我指定第一部分应该使用class="yui-gc"，分别是2/3到1/3的比例。本地(左)与在同一浏览器中部署(右)

​

​

然后，我指定其余部分应该使用class="yui-gf"，分别是1/4到3/4的比例。本地(左)与部署(右)相同的浏览器

​

​

你知道为什么在部署到github-pages时布局会发生变化吗？有没有什么我可以在css中指定的东西，以使它们保持一致，并且最好是以本地呈现的方式？

参考source html和source css

Answer 1

当您在GitHub页面上加载站点时打开控制台时，它会显示：

The page at 'https://cory-kramer.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css'. This request has been blocked; the content must be served over HTTPS.

当您的网站(GitHub页面)正在使用HTTPS时，您正在请求通过HTTPS提供的文件。出于安全考虑，浏览器不允许这样做。

因此，yui CSS文件不会加载，并且布局会中断。

据我所知，yahooapis (您正在使用的)没有提供其CDN的HTTPS版本，复制该文件并将其添加到您的GitHub存储库，然后相对引用它(就像您对您的resume.css文件所做的那样)应该更容易。

作为附注:当你在你的机器上测试时，它可以在本地工作，因为当你打开它时，它不使用http协议( url应该以file://开头，而不是http://)，所以你可以请求不安全的http文件。