Internet Explorer 8 producing strange CSS bug on :hover

Question

I'm working on website development, styling a breadcrumb trail with CSS at the moment. However, I came across this strange bug in Internet Explorer 8, and I can't figure out why it's happening. To illustrate, here are some images:

This is what one of the breadcrumbs is supposed to look like when hovered over: http://i.imgur.com/Lrr5Qo0.png (image taken in Chrome)

In Internet Explorer, this is what it looks like when hovering: http://i.imgur.com/V5dzdcX.png

It displays fine before hovering, but as soon as the mouse goes over it, it goes nuts.

I've gone through the CSS code, and the only attributes related to :hover are color, background, overflow, and text-decoration. There is nothing to do with margin, padding, height, etc.

What could possible be causing this?

Relevant HTML:

<div class="headtitle pull-left">
    <h1 id="pageTitle" class="ms-core-pageTitle">

    CX Team

    </h1>
    <ul class="s4-breadcrumb">
        <li class="s4-breadcrumbRootNode">
            <span class="s4-breadcrumb-arrowcont">
                <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
            </span>
            <a class="s4-breadcrumbRootNode" href="/sites/cc/Pages/index.aspx">Connect</a>
            <ul class="s4-breadcrumbRootNode">
                <li class="s4-breadcrumbNode">
                    <span class="s4-breadcrumb-arrowcont">
                        <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                    </span>
                    <a class="s4-breadcrumbNode" href="/sites/cc/residential/Pages/index0709-9951.aspx">Residential</a>
                    <ul class="s4-breadcrumbNode">
                        <li class="s4-breadcrumbNode">
                            <span class="s4-breadcrumb-arrowcont">
                                <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                            </span>
                            <a class="s4-breadcrumbNode" href="/sites/cc/residential/customerexperience/Pages/default.aspx">Customer Experience</a>
                            <ul class="s4-breadcrumbNode">
                                <li class="s4-breadcrumbCurrentNode">
                                    <span class="s4-breadcrumb-arrowcont">
                                        <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                                    </span>
                                    <a class="s4-breadcrumbCurrentNode" href="/sites/cc/residential/customerexperience/Pages/CX-Team.aspx">CX Team</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

I unfortunately don't have control over this; it is created dynamically by Sharepoint (which I am forced to use).

CSS:

.s4-breadcrumb a:hover {
    overflow:auto\9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600');
    background-image:-moz-linear-gradient(top,#F90,#F60);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60));
    background-image:-o-linear-gradient(top,#F90,#F60);
    background-image:linear-gradient(to bottom,#F90,#F60);
}

.v4master .s4-breadcrumbNode a,
.v4master .s4-breadcrumbCurrentNode a,
.v4master .s4-breadcrumbRootNode a,
.v4master .s4-breadcrumbNode a:hover,
.v4master .s4-breadcrumbCurrentNode a:hover,
.v4master .s4-breadcrumbRootNode a:hover {
    color:white !important;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    line-height:normal;
}

ul.s4-breadcrumb a {
    line-height:40px;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-bottom:0;
}

ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
    margin-bottom:14px;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-left:0;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-right:0;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-top:0;
}

ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
    margin-top:10px;
}

.s4-breadcrumb a {
    padding-left:5px;
}

.headtitle > ul.s4-breadcrumb {
    padding-left:10px;
}

.headtitle > ul.s4-breadcrumb {
    padding-left:0\9;
}

.s4-breadcrumb {
    padding-left:15px;
}

.s4-breadcrumb a {
    padding-right:5px;
}

.s4-breadcrumb {
    padding-right:15px;
}

.s4-breadcrumb a:hover {
    text-decoration:none;
}

Answer 1

I see two things that could cause it: the overflow declaration with an IE9-only hack, and the lack of a declaration that cures the old-IE hasLayout bug, which bug acts up if you use CSS filters.

See if this works (I hope that you do have control over the CSS):

.s4-breadcrumb a:hover {
    overflow: auto; /* or: hidden */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600');
    zoom: 1; /* cure for the bug */
    background-image:-moz-linear-gradient(top,#F90,#F60);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60));
    background-image:-o-linear-gradient(top,#F90,#F60);
    background-image:linear-gradient(to bottom,#F90,#F60);
} 

.
If that doesn't cure it, make a http://jsbinb.com of it. If you give the images a width, height and a border, it doesn't matter that you cannot upload them themselves. That is: if the images in your HTML play a role in this.