Ошибка Chrome 11 в разборе CSS-правил - PullRequest
Новая
       4

Ошибка Chrome 11 в разборе CSS-правил

0 голосов
/ 10 июля 2011

У меня есть этот слайдер:

enter image description here

И это работает как прелесть практически во всех браузерах (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;
}

Но, когда я проверял rightBtn через панель инструментов разработчика Chrome 11, посмотрите, что я нашел:

enter image description here

Похоже, что парсер Chromes смешивает правила CSS следующего селектора (.definitionContent) с правилами наведения моей кнопки. У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 10 июля 2011

Вы можете попробовать изменить порядок HTML (http://jsfiddle.net/PjFba/1/): 

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

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