Chrome 11 bug in parsing CSS rules

筅森魡賤 提交于 2019-12-24 21:19:44

问题


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>


来源:https://stackoverflow.com/questions/6640835/chrome-11-bug-in-parsing-css-rules

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!