css - Chrome 11 解析 CSS 规则的错误

Question

我有这个 slider :

而且它在几乎所有浏览器(Firefox、Opera、Safari，甚至是设计 killer 浏览器 IE)中都非常有效。但是在 Chrome 11(我必须支持这个版本的 Chrome)和更低版本中，右键会掉下来。我一直在追踪它为什么会这样，我发现了一些非常有趣但同时又很烦人的东西。对于我的左右按钮，我有一个非常简单的 CSS 规则:

#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;
}

但是，当我通过 Chrome 11 的开发人员工具栏检查 rightBtn 时，看看我发现了什么:

Chrome 解析器似乎将下一个选择器 (.definitionContent) 的 CSS 规则与我按钮的悬停规则混合在一起。有人知道吗？

Answer 1

您可以尝试更改 html( http://jsfiddle.net/PjFba/1/ ) 的顺序:

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

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