I have a site that uses a base tag to set an absolute path for relative URLs. It works fine in all the browsers I tested it in, except IE (big surprise). Based on the request that IE is making for the CSS file, it seems not to notice the base tag. It does acknowledge the base tag with everything else on the page. Why is this happening? Can anything be done about it, besides using an absolute path to reference the CSS file? Here is my code:
<!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>
This is what is in the baseTest/style.css file:
div {
background: yellow;
}
EDIT: The same thing seems to happen for images too. All of the tests I did were in IE9. The problem came up in standards mode, as well as IE8 and IE7 compatibility modes.
EDIT 2: It works fine if I specify an absolute URL. I didn't know that support for relative URLs was a recent feature. I may abandon my plan use the base tag to avoid repeating paths, unless I can find some way (like maybe a JS hack) to make this work.
Sample page: http://www.debugtheweb.com/test/base/relative.html
I don't know for sure if this is your issue in IE or not, but according to relevant portion of the HTML 4.01 standards document, the URL in the base href must be an absolute URI. Further, in the example, given it looks like this (with a filename on it):
<!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>
In Google searches, I found discussion of what version Firefox added support for relative paths in the base href (which is what you are using) so that is clearly not something that has always been there and not something the 4.01 standard appears to describe.
The HTML5 spec seems to describe and allow base URLs to not have a host portion (host relative) so perhaps that is something that has been added to the specs recently which IE has not supported yet or has not fully supported yet for CSS file loading.
I would suggest you try putting your domain in the base HREF.
According to html specs: http://www.w3.org/TR/html401/struct/links.html refer: Path information: the BASE element section - This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs.
Chrome and Firefox supports relative paths in this tag but IE does not. IE is following the specs strictly.
To manipulate and include absolute url in the base tag, just include script tag after <head> tag as given below
<script type="text/javascript">
document.write("<base href='" + window.location.href.substring(0, location.href
.indexOf("/context") + 9) + "' />");
</script>
来源：https://stackoverflow.com/questions/6541721/ie-doesnt-support-relative-paths-in-the-base-element-when-referencing-css-files