CSS images with Relative URL sometimes relative to page URL in IE

问题

I seem to be finding that IE sometimes tries to load CSS images with relative URLs, relative to the page url rather than the CSS file url.

Example... someone loads this url:

https://www.main-events.com/event/234/my-awesome-show/onlineentry/step-four/do-something

That has a CSS file:

<link rel="stylesheet" type="text/css" href="/content/core/MainEvents.min.css" />

With this inside it:

.fade-red
{
    background: url("../../img/fade-red.png") repeat-x scroll 0 100% #9D0032;
}

I then get an exception that looks like this:

HttpException: The controller for path '/event/234/my-awesome-show/onlineentry/img/fade-red.png' was not found or does not implement IController.

See what's happening?

Instead of loading the ../../img/fade-red.png url relative to the CSS url /content/core/MainEvents.min.css like this /img/fade-red.png... it's incorrectly trying to load it relative to the page url /event/234/my-awesome-show/onlineentry/step-four/do-something like this /event/234/my-awesome-show/onlineentry/img/fade-red.png.

I've checked the UserAgent string and it always seems to be IE8. Here's a few I've seen:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.4; .NET CLR 1.1.4322; .NET CLR 2.0.50727; WinNT-PAI 22.06.2009; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPNTDF; .NET4.0C; BRI/1; BRI/2)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET4.0C)

I guess my question is, has anyone ever come across this? Is it a known issue with IE8? Is changing my css image urls to absolute the only fix?

来源：https://stackoverflow.com/questions/14724664/css-images-with-relative-url-sometimes-relative-to-page-url-in-ie