我在github-pages上創(chuàng)建了一個(gè)用戶網(wǎng)站。對(duì)于布局，我使用yui來(lái)指定比例。當(dāng)在本地查看時(shí)(在瀏覽器中打開index.html ),該布局似乎可以正確呈現(xiàn)，但當(dāng)從部署的github-pages中打開時(shí)卻不正確。

例如我指定第一部分應(yīng)該使用class = & quotyui-GC & quot；分別是2/3到1/3的比例。同一瀏覽器中的本地(左)與部署(右)

然后稍后我指定剩下的部分應(yīng)該使用class = & quotyui-gf & quot；分別是1/4到3/4的比例。本地(左)與部署(右)同樣的瀏覽器

知道為什么部署到github-pages時(shí)布局會(huì)改變嗎？我可以在css中指定一些東西來(lái)使它們一致嗎，最好是本地呈現(xiàn)的方式？

用于參考源html和源css

當(dāng)您在GitHub頁(yè)面上加載站點(diǎn)時(shí)打開控制臺(tái)，它會(huì)顯示:

位于“https://cory-kramer.github.io/”的頁(yè)面是通過https加載的，但請(qǐng)求了一個(gè)不安全的樣式表“http://yui . Yahoo APIs . com/2 . 7 . 0/build/reset-fonts-grids/reset-fonts-grids . CSS”。此請(qǐng)求已被阻止；內(nèi)容必須通過HTTPS提供。

當(dāng)您的網(wǎng)站(GitHub pages)使用HTTPS時(shí)，您正在請(qǐng)求通過HTTP提供的文件。出于安全考慮，瀏覽器不允許這樣做。

因此，yui CSS文件不會(huì)被加載，您的布局會(huì)中斷。

據(jù)我所知，yahooapis(您正在使用的)沒有提供其CDN的HTTPS版本，對(duì)您來(lái)說，復(fù)制該文件并將其添加到GitHub repo中，然后相對(duì)引用它應(yīng)該更容易(就像您對(duì)resume.css文件所做的那樣)

附帶說明:當(dāng)您在您的機(jī)器上測(cè)試時(shí)，它在本地工作，因?yàn)楫?dāng)您打開它時(shí)，它不使用http協(xié)議(url應(yīng)該以file://而不是http://)開始，所以您被允許請(qǐng)求不安全的http文件。

在我的例子中，我使用的是Flexbox，div在GitHub-pages上呈現(xiàn)的方式不同

但是在禁用廣告攔截?cái)U(kuò)展后，這個(gè)問題就解決了