Chrome 11 解析 CSS 规则时出现错误

Question

我有这个滑块：

它在几乎所有浏览器（Firefox、Opera、Safari、甚至是设计师杀手浏览器 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>