0

私は奇妙な問題を抱えています。Web サイトに Facebook の「いいね！」ボタンを追加しようとしていますが、Internet Explorer と Firefox では表示されません。はい、私はすでにこれを追加しました：

<html xmlns:fb="http://ogp.me/ns/fb#">

および FB-Root と JS SDK。XFBML または HTML5 バージョンを追加しようとすると、常に IE および Firefox に表示されません。Chrome と Safari では問題なく動作します。

ただし、divマウス ホバーの上に FB のようなボックスを含む表示中のボタンにカーソルを置いたままにすると、正しく表示されます。また、このいいねボタンをサイトの他の場所に配置すると、表示されます。

コードは次のとおりです。

<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span> 
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>  
</div>
</a>
</li>

Firefox と IE は、ページの読み込みの開始時にこのボックスをレンダリングしているようです。ただし、彼らは彼らのためにスペースを残します。それは奇妙だ。

助けていただければ幸いです。前もって感謝します。

4

2 に答える 2

0

OK、この問題の解決策を見つけました。

まず、css ファイル内のすべての z-index をクリアしz-index: 8;、.box_pop.

次に、何も設定.ikonka divせずにdisplay: none;そのまま.ikonka:hover divにします (これを css に入れることはできません)。

第三に、いくつかの jQuery をセットアップしました。

 <script>
 $(document).ready(function() {
 $('#your-li-id').hover(function() {
 $(this).addClass('pretty-hover');
 }, function() {
 $(this).removeClass('pretty-hover');
 });

 });
 </script>

注:要素#your-li-idの ID をここに入力する必要がありますli。pretty-hoverこのスクリプトはクラスを に追加しますli。次に、CSS に次のように記述します。

.pretty-hover div{
    display: block;
}

今すぐ動作するはずです。

ご覧のとおり、CSS に設定してから (これも CSS を介して) ホバーを追加する必要はありません。display: none;display: block;

それを行うと、iFrame は IE や FF でも表示されなくなります。このトリックは jQuery で行う必要があります。

于 2012-12-29T14:10:56.817 に答える
0

Firefox のみ (v.29.0.1) で同じ問題が発生し、AdBlock プラス (v.2.6) が [いいね] ボタンと [共有] ボタンのレンダリングをブロックしていることが判明しました。

于 2014-05-22T10:01:33.910 に答える