Missing stylesheets/scripts/images when using BASE element for a local html file rendered in IE8 in IE8 standards mode

问题

We have some HTML pages (local, not on a web server) that use the BASE element to identify a specific base directory that contains a bunch of common stylesheets and images. Here is an example (page is stored in c:\temp\html\test.html, resources directory is c:\temp\resources):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <base href="file:///c:/temp/resources/"></base>
    </head>
    <body>
        <p><img src="image.jpg" /></p>
    </body>
</html>

That works fine in all current browsers that I've tested (Firefox, Chrome, IE9) and works fine in IE8 in Quirks mode. But in IE8 running under IE8 standards mode (the default for this page - and in the real pages is the required mode) any stylesheet, script or image references are broken - it is as if the element is being ignored completely.

I've tried other variations on the element - <base href="file:///c:/temp/resources/"> or <base href="file:///c:/temp/resources/"/> as well as all sorts of different file urls, e.g. file:///c:/temp/resources/test.html etc. and also relative hrefs for the base but nothing seems to persuade the images/stylesheets/scripts to load.

I know that the example above seems trivial, but in our real scenario we have to load pages in IE8 under IE8 standards mode and have to set a specific so I'm really trying to figure out a solution if there is one.

I did turn up some references to a bug in early IE8 versions relating to the element, but they are marked as fix quite a while ago and I am testing this on a clean Windows 7 VM with all IE8 updates applied.

回答1:

Status Update: Use: <base href="\\c:\temp\resources\" />

Here's the process I used in creating this solution to allow IE8 to use the Base Attribute for local files.

To clarify: This W3C validated solution works for IE7, IE8 and all modern browsers!

Reference Screenshot::
Here you can see that IE8 Address Bar does not operate like the other modern browsers: The slashes are reversed and there is no file:/// protocol seen. However, IE8 will show the file:/// protocol in the Browser's Status Bar upon page refresh!

Reference Screenshot:
Since IE8 is treating Local Files differently, understanding the IE8 protocol for file:/// is important.

To realize what syntax methods are available, viewing Internet Options (Security Tab) for Local Intranet will give us that info. No changes are actually done here, just the syntax please:

In the above photo, the Local Intranet Window confirms that backslashes are required.

Also, it shows that the file:\\ protocol is associated with this slash syntax. Since file:/// protocol is implied automatically by IE8 (previously mentioned: see Browser's Status Bar and note slashes are rendered correct!!).

Defining this file: protocol in the Base tag is the issue. The solution is not to use a protocol!

Reference Link 1: Protocol-less URL Scheme:

It’s not exactly light reading, but section 4.2 of RFC 3986 provides for fully qualified URLs that omit protocol (the HTTP or HTTPS) altogether. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.

Reference Link 2: Understanding Network Path Reference by Paul Irish:

*Of course, if you're viewing the file locally, it'll try to request the file with the file:// protocol.

The references above explain that using // will allow any browser to use the currently known URL Scheme when accessing files or assets. Since IE8 is the game changer, using \\ instead of // will work for the Base tag since all browsers will convert/interpret that as the standard file:/// URL Scheme (local files implied), including browser IE7!

Complete HTML Markup | The working DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Using Base Tag with Local Files IE8 and Modern Browser DEMO</title>

  <!-- The name of this file is:  test.html  -->
  <!-- The location of this HTML file on the hard drive is:  C:\temp\html\test.html  -->

  <!-- This unusually constructed Base attribute tag uses two rules to have it work for Locally Hosted IE8 Files that are not server based. -->
  <!-- First, the "URL Scheme" is based on "Network Path Reference" which means no Protocol is used. -->
  <!-- Second, the "forward slashes" are changed to "back slashes". It's the syntax IE8 actually expects. -->
  <!-- This entire method is also friendly for modern browsers showing these local files that are not server based. -->
  <base href="\\c:\temp\resources\" />

</head>
<body>

  <p>
    <!-- The location of this "image.jpg" on the hard drive is at:  C:\temp\resources\image.jpg  -->
    <img src="image.jpg" alt="image" />
  </p>

</body>
</html>

回答2:

Unfortunately, it looks like IE8's standards mode does not handle file:// URI's in the BASE element.

If you can run script inside your local pages, I'd suggest you use some simple javascript to loop through all your external elements (SCRIPT, IMG, LINK, IFRAME, FRAME) and fix up any scheme-less URIs (the ones that don't contain "://") using your desired BASE.

来源：https://stackoverflow.com/questions/11234172/missing-stylesheets-scripts-images-when-using-base-element-for-a-local-html-file

标签

internet-explorer

internet-explorer-8

ie8-browser-mode