1

親divウィッチに含まれるFacebookコメントウィジェットが、オーバーフロー非表示を使用して垂直にカットされています。コンテンツの一部のみを表示してから、jQuery を使用して親コンテナーを展開できるように、そのように設定しました。

これはすべての主要なブラウザー (iPhone のサファリを含む) でうまく機能しますが、Android (Android 4.0 でテスト済み、ブラウザーのバージョンは不明) では、オーバーフローした div の外側のコンテンツはまだ表示されていませんが、アクセスできます。ユーザーは、表示されていないリンクをクリックすることができます。これは明らかに望ましくない動作です。

私のHTML：

<div class="pageBlock column5050 column2">          
  <div style="" class="ext_container">
    <div data-mobile="false" data-width="" data-num-posts="10" data-href="http://na.se/redesign2012/kundcenter" class="fb-comments  fb_iframe_widget">
      <span style="height: 1049px; width: 550px;">
        <iframe scrolling="no" id="fcb3ba7898c46" name="f169222f1ff27fe" style="border: medium none; overflow: hidden; height: 1049px; width: 550px;" class="fb_ltr " src="https://www.facebook.com/plugins/comments.php?api_key=113851685335230&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D8%23cb%3Df12db7f9bc71f98%26origin%3Dhttp%253A%252F%252Fna.se%252Ffb9561675e1892%26domain%3Dna.se%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fna.se%2Fredesign2012%2Fkundcenter&amp;locale=sv_SE&amp;mobile=false&amp;numposts=10&amp;sdk=joey&amp;width=550"></iframe>
      </span>
    </div>
  </div>
  <div class="fb_expand_btn expand_btn">
    <span class="expand_capt">Visa fler...</span>
  </div>
  <script type="text/javascript">
    [...]js/jQuery to expand/contract "ext_container"[..]
  </script>

</div>

「ext_container」内のすべては Facebook コメント ウィジェットによって生成されます。サード パーティの CMS を使用しているため、HTML の制御は制限されています。

私は次のCSSを使用します

.fb-comments {
  width: 100% !important;
}

.fb-comments span, .fb-comments iframe {
  width: 100% !important;
}


.ext_container {
  position: relative;
  height: 440px;
  overflow: hidden;
  margin: 0 20px 20px;
}

.fb_expand_btn.expand_btn {
  margin: 0 20px;
}

私のスクリプトは、ext_container の高さのみを変更します。

ext_container を position:relative に設定しました。これは、overflow:hidden を無視する IE7 のバグのためです。

最後に、レイアウトが完全に流動的であるため、幅が 100% になっています。

とにかく、私は上記の動作への言及を見つけようとしましたが、誰かがこれに遭遇して解決策を持っていれば本当に感謝しています.

4

1 に答える 1

0

iframe がブラウザのデフォルトの幅になっていると思われます。幅スタイルを設定するだけでなく、iframe の幅属性を設定してみてください。

つまりiframeに属性をつけてみて、

幅="550"

特にオーバーフローに関しては、iframe と css が常に適切に機能するとは限りません。高さ属性を設定することも有益です。

于 2012-07-02T14:10:41.960 に答える