Question

我将尽力解释这个问题：我有两个CSS上传方法。第一个与link rel一起使用，并且运行良好。第二个（用于性能问题）放在css文件中，然后直接将css打印到页面中。

<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
    <?php
        $urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
        $style = file_get_contents($urlstyle);
        echo $style;
    ?>
</style>

绝对毫无疑问要加载什么。这两个方法返回相同的css。作为示例，我们可以使用css的这部分

.wrapper-accueil .scroll:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
  background-size: contain;
}

如您所见，里面有一个URL。当尝试使用第一种方法加载CSS时，路径很好。一切正常。

但是，当我尝试第二种方法将此css写入调用文件的内部时，问题就来了。 CSS的网址路径错误。（我不应该拥有第一个../才能使其正常工作。

这是问题。即使此代码不应与第二种方法一起使用。该文件已正确加载，没有问题。而且我不明白为什么它起作用。（并且清除了缓存，对此毫无疑问）。更奇怪的是，当我将网站上载到服务器上并且不再位于本地主机中时，确实存在问题，并且找不到文件。

因此应在localhost工作，而不应该这样做。不能在服务器上工作，而实际上应该不工作。

但是我又有一个陌生人，我有另一个网站。相同的框架（意味着相同的文件夹/文件结构），相同的CSS文件，包含文件的相同方法。并使用第二种方法，该文件也可以在localhost和服务器中找到...虽然它不应该与它们都不工作。

我希望您有任何想法，因为此时我迷路了。谢谢。

Answer 1

.wrapper-accueil .scroll:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
  background-size: contain;
}

May be you have a folder containing picto has on another folder

Answer 2

我不确定我100％遇到了什么问题，但是似乎您从两个不同的起点加载了具有相对路径的CSS：

已加载链接：

www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg

包含在站点中：

www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
                           ^^^
            note the missing path due to "../" in your svg path

也许这是您的问题的答案，如果我没有正确理解您，请随时澄清！另请检查开发者控制台，尤其是Chrome中的“网络”标签，查看请求的内容并仔细检查其中的路径。

CSS URL请求问题

2 个答案: