【问题标题】:What is the correct way to specify relative paths in streamed CSS?在流式 CSS 中指定相对路径的正确方法是什么?
【发布时间】:2012-06-13 07:58:51
【问题描述】:

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

不存在的。

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

【问题讨论】:

    标签: javascript html css path


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      绝对路径网址

      之所以这样称呼绝对路径,是因为它们指的是非常具体的位置,包括域名。 Web 元素的绝对路径通常也称为 URL。例如,这个网页的绝对路径是:

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

      您通常使用域的绝对路径来指向与您自己的域不同的域中的 Web 元素。例如,如果我想链接到 google,它将是 ...

      如果您指的是与您所在域相同的 Web 元素,则无需在链接路径中使用域名。只需省略域,但请确保在域名后包含第一个斜杠 (/)。

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

      相对路径网址

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

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

      如何确定相对路径:

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

      【讨论】:

      • 我认为对于通过 ajax 流式传输 CSS,所有路径都相对于“根”目录 - www.host.com - 似乎给出的路径信息仅相对于
      • 我认为对于通过 ajax 流式传输 CSS,所有路径都相对于“根”目录 - www.host.com - 似乎路径信息仅适用于 插入的 CSS
      【解决方案3】:

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

      【讨论】:

      • 我不使用 ...我通过 ajax 在 .css 文本中流式传输并使用 appendChild() 将其添加到 DOM ...
      【解决方案4】:

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

      【讨论】:

      • 这就是我想要的相对于文件位置的内容....我的 CSS 文件在这里 /source/css.css 和我的图像在这里 /images/name.jpg...所以正确路径应该是 ../images/name.jpg...但是一旦我开始使用动态 CSS,它就停止工作了...我相信动态 CSS 是一个特例。
      • 为什么要使用 AJAX 插入 CSS,而不是动态添加一个 <link> 元素来提示要加载的 CSS?这将保留相对路径。
      猜你喜欢
      • 2014-10-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-26
      相关资源
      最近更新 更多