元素隱藏與溢出仍然可以在android

我有一個包含在一個父div女巫切割它垂直使用溢出隱藏的Facebook評論小部件。我已經以這種方式進行了設置，以便我可以開始僅顯示部分內容，然後使用jQuery擴展父容器。元素隱藏與溢出仍然可以在android

這適用於所有主要的瀏覽器（inculding的iPhone Safari瀏覽器）很大，但是在Android中溢出的div之外的內容（在Android 4.0，不知道瀏覽器的版本測試），同時仍然不可見，可訪問。用戶可以點擊他們看不到的鏈接，顯然是不需要的行爲。

我的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，因爲IE7的bug會忽略我的overflow：hidden。

最後，100％的寬度在那裏，因爲有一個完全流暢的佈局。

無論如何，我試圖找到上述行爲的任何參考，但無濟於事，真的很感激，如果有人遇到這一點，並有一個解決方案。

來源

2012-07-02 Jesper

我在Nexus 4上有同樣的問題，使用溢出：滾動...我可以使用其他元素的絕對定位來修復它，但是這個破解是醜陋的。儘管找到另一種方式。 –

我懷疑iframe正在獲取瀏覽器的默認寬度。嘗試設置iframe的寬度屬性，而不是設置寬度樣式。

換句話說，試着給的iframe的屬性，

WIDTH = 「550」，特別是當它涉及到溢出

I幀和CSS並不總是發揮不錯。您也可以通過設置高度屬性來獲益。

來源

2012-07-02 14:10:41 daveyfaherty

雖然寬度工作得很好。無論如何，我不能在iFrame上設置實際的寬度/高度值，因爲它是由facebook sdk生成的，因此需要設置css-width（甚至使它變得重要）。你確實給我的想法，嘗試和目標的iFrame的實際高度，而不是容器，可能會工作... – Jesper

而不是設置容器的css高度我現在試圖設置高度（而不是css）上div與我的腳本。它看起來很好，但iFrame之外的內容仍然可以訪問，所以在那裏沒有成功。 – Jesper

元素隱藏與溢出仍然可以在android

回答

相關問題