在流式CSS中指定相对路径的正确方法是什么？

Question

我在Firefox工作，相对路径无效。

有一点需要注意的是，我使用AJAX流式传输我的.css文件，并将其动态添加到DOM中。

另一个警告是我的网站以两种方式之一进入：

www.host.com (use this for production)

或

www.host.com/dev/ (use this for dev)

图片在这里：

www.host.com/host/images 

或

www.host.com/dev/host/images

取决于您进入网站的方式。

我可以发布所需的任何信息并测试解决方案。

我正在使用

../images/name.jpg

但是浏览器以某种方式将其用于：

hosts.com/images/name.jpg

不存在。

这是一个关于相对路径和正确实现的问题。

Answer 1

绝对路径网址

调用绝对路径，因为它们引用了非常具体的位置，包括域名。 Web元素的绝对路径通常也称为URL。例如，此网页的绝对路径为：

What is the correct way to specify relative paths in streamed CSS?

您通常使用域的绝对路径指向另一个域上的Web元素而不是您自己的域。例如，如果我想链接到谷歌，那将是 ...

如果您指的是与您所在域名相同的网络元素，则无需在链接路径中使用域名。只需离开域名，但请务必在域名后面加上第一个斜杠（/）。

在大多数网站上使用绝对路径（没有域名）是个好主意。此格式可确保无论您在何处放置页面，链接或图像都可以使用。这似乎是使用更长链接的愚蠢理由，但如果您在网站上的多个页面和目录之间共享代码，使用绝对路径将加快维护。

相对路径网址

相对路径会根据链接所在的页面而变化。使用相对路径创建链接有几个规则：

• 与页面相同的目录中的链接没有路径信息 列出的文件名
• 列出的子目录没有任何前面的斜杠 每周/文件名
• 链接一个目录列为../ filename

如何确定相对路径：

1. 确定您正在编辑的页面的位置。这篇文章是 位于我网站上的/ library / weekly文件夹中。
2. 确定要链接到的页面或图像的位置。该 初学者资源中心位于：/ library / beginning /
3. 比较位置并决定如何指向它 文章，我需要升级一个目录（到/库），然后 返回到开始目录
4. 使用上面列出的规则编写链接：...

Answer 2

相对路径会根据链接所在的页面而变化。使用相对路径创建链接有几个规则：

Answer 3

相对路径始终相对于CSS位置，而不是引用CSS文件的网页位置。所以问题是，CSS文件的位置是什么？如果您创建了相对于它的所有路径，它应该适用于您的生产和开发URL。

Answer 4

我需要对此进行测试，但对于动态插入的CSS，所有路径都相对于根目录或www.host.com ...这解析为...这实际上是说所有路径实际上都是绝对的..这是我在FireFox中看到的行为。