我们在我们的网站上使用了一个滑出式 CSS 框,当我们将类似 facebook 的框插入到滑动的 div 容器中时,它在 IE8 中的表现非常零星。
使用的CSS代码是:
#sliding_box {
position:absolute;
width:425px;
height:500px;
background: url(./images/layout/facebook.png);
top:200px;
left:0px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin-left: -387px;
}
#sliding_box:hover{
margin-left: 0px;
}
HTML 是:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=2422861308";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="sliding_box">
<div class="fb-like-box" data-href="http://www.facebook.com/scopestop" data-
width="387" data-height="500" data-show-faces="true" data-border-color="gray" data-
stream="true" data-header="true"></div>
</div>
似乎一旦加载了like box,它就不会将悬停在like box上视为悬停在div容器上。在加载喜欢的框之前,它只显示空白,它不会出错。
JSFiddle:http://jsfiddle.net/m4xg8/3/
fiddle 现在可以正常工作了。
我尝试使用绝对定位代替 margin-left 来使框滑动,但我在 Internet Explorer(8 和 9)中遇到了同样的问题。
不幸的是,按照建议更改网站上的无效字符也没有解决问题。
我已经向我的网络开发老师和 PHP 老师求助,但他们没有任何想法。有人熟悉 Facebook 点赞框并将其与悬停 CSS 容器一起使用吗?
最佳答案
您的网页中似乎有一些无效字符:
关于div :hover in IE8 and 9 not working correctly with facebook like box, 上的 CSS 边距变化偶尔跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12357012/