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;
    float: 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?

回答1:

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>