Position absolute messes up Bootstrap's breadcrumb in Internet Explorer 8 - html

Question

The issue is quite simple really. Here is my CSS:
.fixed-body {
position: absolute;
}
And my HTML:
<div class="fixed-body">
<ul class="breadcrumb">
<li class="active">Name with spaces<span class="divider">/</span></li>
<li>Home<span class="divider">/</span></li>
<li>Library</li>
</ul>
</div>
Everything looks all right in all browsers apart from Internet Explorer 8. This is how it renders the Breadcrumb:
You can see it for yourself in this jsfiddle. This is just the resulting frame because jsfiddle doesn't render on IE8 properly. The whole fiddle is at this address (it's the same address without the "show" part in the URL).
There are two reasons why it doesn't render properly:
The CSS directive position: absolute in .fixed-body
Spaces in the first section of the breadcrum Name with spaces
If the first section doesn't contain spaces or the position of the parent node isn't set to absolute then Internet Explorer 8 renders the breadcrumb properly.
I tried to wrap the breadcrumb in another div and reset its position to static but it doesn't help. Is there any specific limitation of Internet Explorer 8 that shows in that way? And most interestingly, is there any way of fixing or working around this problem?
EDIT (copied from my response):
Just found by accident the proper fix. Overriding inline-block with inline for li in the breadcrumb gives the desired effect without any side issues (AFAIK):
.breadcrumb > li {
display: inline;
}
See also the new version of my fiddle, or open just the show frame in IE8.

Answer 1

This is because of "breadcrumb" width...
Check this in IE8: http://fiddle.jshell.net/azm53/12/show
I have changed breadcrumb width to 400px and it's ok.
<div class="fixed-body">
<ul class="breadcrumb">
<li class="active">Name with spaces<span class="divider">/</span>
</li>
<li>Home<span class="divider">/</span>
</li>
<li>Library
</li>
</ul>
</div>
And CSS
.fixed-body {
position: absolute;
}
.breadcrumb {
width: 400px;
}

Answer 2

Actually, setting the display to inline-block gives a similar result as the answer gave by ITChristian:
.breadcrumb {
display: inline-block;
}
However, both solutions have some problems. In case of setting width to a fixed value the site ceases to be responsive (the breadcrumb will not size with the window). When setting display to inline-block the gray background shrinks to only cover the links, leaving a white strip to the right. If after setting display to inline-block the width is set to 100% then it overflows the right border (since the width is to take 100% of the parent's element). Maybe the simplest solution would be to just get rid of the spaces?
EDIT:
Just found by accident the proper fix. Overriding inline-block with inline for li in the breadcrumb gives the desired effect without any side issues (AFAIK):
.breadcrumb > li {
display: inline;
}
See also the new version of my fiddle, or open just the show frame in IE8.