菜鸟教程小白 发表于 2022-12-12 17:42:47

iOS Safari 使用错误的域作为相对 CSS 路径


                                            <p><p>我正在使用 <a href="https://fortawesome.github.io/Font-Awesome/" rel="noreferrer noopener nofollow">Font Awesome</a>来自 CDN:</p>



<pre><code>&lt;link rel=&#34;stylesheet&#34;
    href=&#34;//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css&#34;
&gt;
</code></pre>

<p>在桌面浏览器上,一切正常。但在 iOS Safari 浏览器(iOS 9)上,图标不渲染,全部被正方形代替。</p>

<p>我将 iPad 连接到 Mac,启动开发者工具,发现 iOS 浏览器尝试从我自己的服务器而不是 CDN 下载字体文件。</p>

<p>例如,CDN 上的 CSS 文件包含以下行:</p>

<pre class="lang-css prettyprint-override"><code>@font-face{
    src:url(&#39;../fonts/fontawesome-webfont.eot?v=4.4.0&#39;);
</code></pre>

<p>但 iOS Safari 将其解析为:</p>

<pre><code>GET http://mywebsite.com/fonts/fontawesome-webfont.eot?v=4.4.0
</code></pre>

<p>据我所知,在 CSS 中,相对路径是相对于 CSS 文件的位置,而不是相对于当前页面的位置。</p>

<p>这是 iOS Safari 中的(已知?)错误吗?有解决办法吗?</p>

<p>任何指针表示赞赏。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>不确定问题出在哪里,但升级到 iOS 9.2 和 Font Awesome 4.5.0 似乎已经解决了我的问题。</p>

<p>但我仍然遇到了问题,因为图标出现了一秒钟然后消失了。原来这是因为一个过时的 <a href="https://github.com/rodneyrehm/viewport-units-buggyfill" rel="noreferrer noopener nofollow">viewport-units-buggyfill.js</a>脚本。将其升级到 0.5.5 解决了这个问题。</p></p>
                                   
                                                <p style="font-size: 20px;">关于iOS Safari 使用错误的域作为相对 CSS 路径,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/34287530/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/34287530/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: iOS Safari 使用错误的域作为相对 CSS 路径