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

时间:2012-06-09 16:44:30

标签: javascript html css path

我在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

不存在。

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

4 个答案:

答案 0 :(得分:3)

绝对路径网址

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

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

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

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

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

相对路径网址

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

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

如何确定相对路径:

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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