问题
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