Chrome 11 bug in parsing CSS rules

I have this slider:

And it works like a charm in almost all browsers (Firefox, Opera, Safari, and even the designer-killer browser, IE). But in Chrome 11 (I have to support this version of Chrome) and lower versions the right button falls down. I was tracking to see why it behaves so, and I came across something really interesting, but at the same time annoying. For my left and right buttons, I have a very simple CSS rules:

#rightBtn
{
    background: url(/images/rightBtn.png) 0 0 no-repeat;
    width: 56px;
    height: 56px;
    display: block;
    fl开发者_如何学Gooat: right;
    margin-top: 100px;
    cursor: pointer;
    margin-right: -60px;
}

#leftBtn
{
    background: url(/images/leftBtn.png) 0 0 no-repeat;
    width: 56px;
    height: 56px;
    display: block;
    float: left;
    margin-top: 100px;
    cursor: pointer;
    margin-left: -60px;
}

#leftBtn:hover, #rightBtn:hover
{
    background-position: 0px -56px;
}

.definitionContent
{
    width: 820px;
    height: 365px;
    float: left;
}

But, when I inspected rightBtn through Chrome 11's developer toolbar, look what I've found:

It seems that Chromes parser mixes CSS rules of the next selector (.definitionContent) with the hover rules of my button. Anyone got any idea?

you can try changing the order of the html( http://jsfiddle.net/PjFba/1/ ):

<div class="definitionContent">
    <div id="leftBtn"></div>

    <div id="rightBtn"></div>
</div>