html - FB里面的Div之类的在IE中去掉hover状态的时候

Question

我已将一个类似 facebook 的按钮插入到一个 div 中，该 div 将其自身 Conceal 在屏幕之外，直到您将鼠标悬停在它上面:

<div id="fb">Some text here<br />
<div class="fb-like" data-href="http://etc..." data-layout="button" data-action="like" data-show-faces="false" data-share="false" data-colorscheme="dark"></div></div>

使用这个 CSS:

#fb {
    display:block;
    background:url(images/facebook.png) right no-repeat #000;
    color:#FFF;
    height:89px;
    width:280px;
    position:absolute;
    top:20px;
    left:0px;
    padding-right:22px;
    margin-left:-280px;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    font-size:10px;
    border:solid 1px #E3D199;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-top:5px;
    padding-bottom:5px;
    overflow:hidden;
}
#fb:hover {
    margin-left:0px;
    overflow:visible;
}

问题是，当我在 Internet Explorer 中将鼠标悬停在父 div 上时，它会像往常一样滚动，但是一旦我像 div 一样在 facebook 上滚动，它就会在我得到之前返回到原始的“屏幕外”状态有机会点击赞按钮...

谁能帮我弄清楚当我将鼠标悬停在“赞”按钮上时如何让我的 div 保持在屏幕上。

Answer 1

我现在无法在 IE 中测试，但你可能想试试:

#fb {
    display:block;
    background:url(images/facebook.png) right no-repeat #000;
    color:#FFF;
    height:89px;
    width:280px;
    position:absolute;
    top:20px;
    left:0px;
    padding-right:22px;
    margin-left:-280px;
    -webkit-transition:all .5s ease-out;
       -moz-transition:all .5s ease-out;
         -o-transition:all .5s ease-out;
            transition:all .5s ease-out;
    font-size:10px;
    border:solid 1px #E3D199;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-top:5px;
    padding-bottom:5px;
    overflow:hidden;
}

亚历克斯