IE 在引用 CSS 文件时不支持基本元素中的相对路径
Posted
技术标签:
【中文标题】IE 在引用 CSS 文件时不支持基本元素中的相对路径【英文标题】：IE doesn't support relative paths in the base element when referencing CSS files 【发布时间】：2011-09-26 08:53:05 【问题描述】：我有一个使用base tag 为相对URL 设置绝对路径的站点。它在我测试过的所有浏览器中都能正常工作，除了 IE（大惊喜）。根据 IE 对 CSS 文件的请求，似乎没有注意到 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
【问题讨论】：
奇怪 - 我在文档中看不到任何为样式表创建特殊情况的内容。看起来像一个错误。 MDC - W3C 你试过哪个版本的IE？您可以尝试将绝对 URL 指定为base 吗？
最新版本的IE11似乎支持。 IE9 现在已经有几年的历史了，而且可能早于这种支持。
【参考方案1】：
我不确定这是否是您在 IE 中的问题，但根据 the HTML 4.01 standards document 的相关部分，基本 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 spec 似乎描述并允许基本 URL 没有主机部分（主机相对），所以也许这是最近添加到规范中的东西，IE 尚未支持或尚未完全支持CSS 文件加载。
我建议您尝试将您的域放在基础 HREF 中。
【讨论】：
【参考方案2】：根据 html 规范：http://www.w3.org/TR/html401/struct/links.html 参考：路径信息：BASE元素部分- 此属性指定一个绝对 URI，作为解析相对 URI 的基本 URI。
Chrome 和 Firefox 支持此标签中的相对路径，但 IE 不支持。 IE 严格遵循规范。
要在基本标记中操作和包含absolute url，只需在<head> 标记之后包含脚本标记，如下所示
<script type="text/javascript">
document.write("<base href='" + window.location.href.substring(0, location.href
.indexOf("/context") + 9) + "' />");
</script>
【讨论】：
以上是关于IE 在引用 CSS 文件时不支持基本元素中的相对路径的主要内容，如果未能解决你的问题，请参考以下文章
想要IE6~IE8支持css3的border-radius属性，下了一个ie-css3.htc的文件，放在页引入进去不起作用。