驗證碼約-20px

改變了我的內容的高度沒有驗證碼，我的網頁看起來像這樣（jsfiddle）：驗證碼約-20px

<html> 
<body> 

<div class="content_wrap"> 
    <div class="left_container"> 
    </div> 

    <div class="right_container"> 
     <div style="background-color: blue; margin:0px; height: 1500px;"> 
     <!--RECAPTCHA WOULD GO HERE--> 
     </div> 
    </div> 

</div> 

</body> 
</html>

CSS：

body,html { 
    height: 100%; 
    width: 100%; 
    background-color: #f8f8f8; 
} 

div.content_wrap { 
    width: 100%; 
    position: relative; 
} 

div.left_container { 
    float:left; 
    position:absolute; 
    width: 220px; 
    min-height: 100%; 
    background-color: red; 
} 

div.right_container { 
    position: relative; 
    padding: 0px; 
    margin-left: 220px; 
    width: 1000px; 
}

有了驗證碼（在藍色區域），整個頁面內容的高度在底部減少〜20px，帶有可見的白色空白區域。

有沒有人有reCAPTCHA改變他們的佈局元素的問題？

來源

2012-12-07 sooper

驗證碼通常是非常可靠的。你可以鏈接到你已經安裝了reCAPTCHA的實際網頁，（除非有人知道如何），你可以得到一個完全成熟的jsfiddle版本。如果你不能，我會在一兩個小時，當我在一臺電腦，如果沒有人打我看它... –

我已經能夠replicate your issue根據this reCAPTCHA jsfiddle example。

它看起來像reCAPTCHA導致一個空的iframe被追加到頁面的底部。

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border: none;"> 
    This frame prevents back/forward cache problems in Safari. 
</iframe>

上的iframe結果在對這個問題的討論很多的消息A Google search。

而且這裏的一對SO找到了解決方法：Recaptcha creates iFrame on page, breaks styling

嘗試下面的CSS：
/* ReCaptcha Iframe FIX */ 
iframe {display:none !important;} 
header iframe, 
section iframe, 
footer iframe, 
div iframe { display:inline; } 
如果你沒有在網站上的任何其它幀擔心，一個簡單版本就夠了：
iframe {display:none !important;} 

最後，這裏是解決方案實施的jsfiddle：http://jsfiddle.net/BXufS/7/。

來源

2012-12-14 02:05:50 JSuar

偉大的東西，謝謝！ – sooper

我解決這個問題通過在CSS

<iframe src="about:blank" style="height: 0px; width: 0px; visibility: hidden; border: none;"></iframe> 

iframe[src="about:blank"] { display: none; }

當然

靶向IFRAME src屬性我沒有其他內部框架與about:blank源;）

來源

2014-04-21 20:55:36 mdesdev

回答

相關問題