IE不支持在引用CSS文件时使用基础元素的相对路径。

Question

IE不支持在引用CSS文件时使用基础元素的相对路径。

htmlcssinternet-explorerinternet-explorer-9radix

5

我有一个网站，使用base标签来设置相对URL的绝对路径。在我测试过的所有浏览器中都可以正常工作，除了IE（大惊小怪）。根据IE请求CSS文件的方式，似乎没有注意到base标签。它会注意到页面上的其他所有内容，但不是base标签。为什么会这样？除了使用绝对路径引用CSS文件之外，还能做些什么吗？以下是我的代码：

<!DOCTYPE html>
<html><head>
<title>base test</title>
<base href="/baseTest/">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>foo</div>
</body></html>

以下是baseTest/style.css文件中的内容：

div {
    background: yellow;
}

编辑：同样的问题似乎也会发生在图片上。我所做的所有测试都是在IE9中进行的。这个问题出现在标准模式下，以及IE8和IE7兼容模式下。

编辑2：如果我指定一个绝对URL，它就可以正常工作。我不知道相对URL的支持是最近才有的功能。除非我能找到某种方法（比如JS hack）使其工作，否则我可能会放弃使用基础标签来避免重复路径。

示例页面：http://www.debugtheweb.com/test/base/relative.html

- Elias Zamaria

奇怪 - 我在文档中找不到为样式表创建特殊情况的内容。看起来像是个bug。MDC - W3C 你尝试过哪些版本的IE？你可以尝试使用绝对URL来指定“base”吗？ - Pekka

最新版本的IE11似乎支持此功能。IE9已经过时了几年，可能不支持此功能。 - Erik Funkenbusch

2个回答

3

根据html规范：http://www.w3.org/TR/html401/struct/links.html，参考路径信息：基本元素部分 - 该属性指定绝对URI作为解析相对URI的基本URI。 Chrome和Firefox支持此标记中的相对路径，但IE不支持。 IE严格遵循规范。

要操作和包含基本标记中的绝对URL，请在<head>标记后添加脚本标记，如下所示。

<script type="text/javascript">
document.write("<base href='" + window.location.href.substring(0, location.href
        .indexOf("/context") + 9) + "' />");
</script>

- Yogesh Manware

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

我不确定这是否与您在IE中遇到的问题有关，但根据HTML 4.01标准文档的相关部分，基础href中的URL必须是绝对URI。此外，在给出的示例中，它看起来像这样（带有文件名）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

在Google搜索中，我发现有关Firefox何时添加对基本href相对路径支持的讨论（这是您正在使用的内容），因此显然并非一直存在，并且似乎不是4.01标准描述的内容。 HTML5规范似乎描述并允许基本URL没有主机部分（主机相关），因此可能是最近添加到规范中的内容，IE尚未支持或尚未完全支持CSS文件加载。

我建议您尝试将您的域名放入基本HREF中。