오버플로로 숨겨진 요소는 android에서 여전히 액세스 할 수 있습니다.

부모 div 마녀에 포함 된 Facebook- 주석 위젯이 오버플로를 사용하여 세로로 자른 것입니다. 그런 방식으로 설정하여 콘텐츠의 일부만 보여주고 jQuery로 상위 컨테이너를 확장 할 수 있습니다.오버플로로 숨겨진 요소는 android에서 여전히 액세스 할 수 있습니다.

이것은 모든 주요 브라우저 (iPhone 용 사파리 포함)에서 훌륭하게 작동하지만 안드로이드 (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는"페이스 북의 코멘트 위젯에 의해 생성되고 난 제 3 자 CMS를 사용하고 있기 때문에 나는 HTML에 대한 제어를 제한했다.

나는

.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 높이 만 변경 다음 CSS를 사용합니다.

내 오버플로를 무시하는 IE7 버그 때문에 ext_container를 position : relative로 설정했습니다. hidden.

마지막으로 100 % 너비는 완전히 유동적 인 레이아웃이기 때문에 거기에 있습니다.

어쨌든, 위에서 설명한 동작에 대한 참조를 찾으려고했으나 다른 사람이이 문제를 해결하고 해결책을 찾았 으면 정말 감사 할 것입니다.

출처

2012-07-02 Jesper

오버플로 : 스크롤을 사용하여 Nexus 4에서 동일한 문제가 발생합니다 ... 절대 위치 지정을 사용하여 다른 요소를 고칠 수는 있지만 그 해킹은 지옥처럼 추악합니다. 다른 방법을 찾으려고합니다. –

iframe이 브라우저의 기본 너비를 얻고있는 것으로 의심됩니다. 폭 스타일을 설정하는 대신 iframe의 width 속성을 설정해보십시오. 즉

, iframe이에게 속성을 부여 시도 =이 "550"

Iframe이와 CSS는 항상 좋은 연주하지 않는 것이 오버 플로우에 관해서 특히

폭입니다. height 특성을 설정하면 도움이 될 수도 있습니다.

출처

2012-07-02 14:10:41 daveyfaherty

너비가 잘 작동합니다. 어쨌든 iFrame에서 실제 너비/높이 값을 설정할 수는 없으므로 facebook sdk에서 생성되므로 css 너비를 설정할 필요가 있습니다 (심지어 중요하게 만들 수도 있습니다). 당신은 작동 할 수 있습니다, 시도하고 대신 컨테이너의 iFrame에의 실제 높이를 대상으로 나에게 아이디어를 줄 않았다 ... 지금 높이 (안 CSS)에 설정하려고 대신 컨테이너의 CSS-높이를 설정하는 – Jesper

내 스크립트와 div. 괜찮아 보이지만 iFrame 외부의 콘텐츠에 계속 액세스 할 수 있으므로 성공하지 못했습니다. – Jesper

오버플로로 숨겨진 요소는 android에서 여전히 액세스 할 수 있습니다.

답변

관련 문제