Neden "Facebook Comments" iFrame, CSS ile ekrana yüklendiğinde farklı bir yüksekliğe sahip: "yok"?

Bir sayfa yükleyen bir web uygulaması yazıyorum ve daha sonra Facebook'un XFBML kodunu kullanarak bir Facebook Comments kutusunu görüntülemek için javascript kullanır. Facebook Comments iframe'i, sayfa yüklemesinde "display: none" olarak ayarlanmış bir kapsayıcıya sahibim. Daha sonra bir kullanıcı bir düğmeye tıkladığında konteyner görüntülenir.Neden "Facebook Comments" iFrame, CSS ile ekrana yüklendiğinde farklı bir yüksekliğe sahip: "yok"?

Karşılaştığım sorun, sayfa Facebook Comments kapsayıcısının "display: none" olarak ayarlandığında, Facebook'un yüklediği iframe'nin beklenenden daha büyük bir yüksekliğe sahip olmasıdır. Bununla birlikte, sayfayı Facebook Comments kapsayıcısını "display: block" olarak ayarladıktan sonra sayfanın yüklenmesinden sonra "display: none" olarak ayarlıyorum, iframe uygun height niteliğini alır. Iframe'in yüksekliğinin ayarlanmasında bu tutarsızlığa neyin sebep olduğunu merak ediyorum.

Benim geçici çözümüm, sayfanın içerdiği stil ile 'display: block; yükseklik: 1px; genişlik: 1px; kenarlık: yok 've sonra sayfayı yükledikten sonra javascript'i kullanarak kapsayıcıyı' display: none 'olarak ayarlayın. Bunun nedenini merak ediyorum ve yaptığımdan daha iyi bir çözüm varsa.

Bu fenomeni açıklayabilir ve önerilen çözümün ne olduğunu söyleyebilir misiniz?

Başvurunuz için, aşağıdaki geçici çözümüm, yerinde çözüm bulunmadan basitleştirilmiştir. Bunu bir tarayıcıda yüklerseniz ve "Yorumları Göster" düğmesini tıklarsanız, Facebook Comments kapsayıcısı olan ve gerçek yorumlar kutusundan daha büyük olan geniş gri alanı görürsünüz. height: attribute-- Eğer yükseklik, display: none; geçersiz kılmaları bunu (belirli geçersiz kılmaları yüksekliği gibi display: inline;) ayarlamış olsa bile görmezden gelerek

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Facebook Commments Page</title> 
     <style type="text/css"> 
      .initial-content { width: 100%; overflow: hidden; } 
      .show-comments-button { float: left; background: #aaa; padding: 6px;} 
      #facebook-comments { display: none; background: #eeeeee; } 
     </style> 
     <script> 
      function showComments(e){ 
       var commentContainer = document.getElementById('facebook-comments'); 
       commentContainer.style['display'] = 'block'; 
      } 
     </script> 
    </head> 
    <body> 
     <div class="initial-content"> 
      <h1>My little web app</h1> 
      <p>Here is the content a user sees when first loading the page.</p> 
      <div class="show-comments-button" onclick="showComments(event);">Show Comments</div> 
     </div> 
     <div id="facebook-comments"> 
      <h1>Facebook Comments</h1> 
      <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="example.com" num_posts="2" width="500"></fb:comments> 
     </div> 
    </body> 
</html>

kaynak

2011-06-28 TJ_Fischer

ben emin olamayız, ama belki display: none; fonksiyonları.

Ben

#facebook-comments { display: none; }

sonra Facebook yorumlarınızı yüklemeden önce JS

<script> 
    var commentContainer = document.getElementById('facebook-comments'); 
    commentContainer.style['display'] = 'block'; 

    function showComments(e){ 
     ... 
    } 
</script>

ile display: block; için geçersiz kılma, JS olmayan kullanıcılar için son çare olarak, CSS display: none; sahip öneriyoruz. Belki değil basit yolu

<script> 
    var commentContainer = document.getElementById('facebook-comments'); 
    commentContainer.style['display'] = 'none'; 
</script>

, ancak çalışması gerekir: iframe yüklendikten sonra, sadece </body> önce, sadece tekrar div gizlemek.

Şerefe!

kaynak

2011-07-06 19:58:24 citelao

Neden "Facebook Comments" iFrame, CSS ile ekrana yüklendiğinde farklı bir yüksekliğe sahip: "yok"?

cevap

İlgili konular