小编Joe*_*Joe的帖子

放置在jQuery标签内的谷歌地图不起作用是一个遍布网络的问题.到目前为止,在我的研究中,似乎没有一种解决方案可行.希望有人可以帮助......

这是Firefox 10,Chrome 17,Safari 5.1.2,Opera 11.61中的错误的屏幕截图. http://www.flickr.com/photos/75523633@N04/6932970713/

IE8中不存在该错误,并且在9中是间歇性的.在Firefox中,当您打开FireBug时它会消失.

该站点在Wordpress 3.3.1中,并通过插件生成/检索地图.我使用哪个地图插件似乎并不重要; 错误保持不变.根据我的研究,这似乎是选项卡和Google Map API javascript之间的js/jQuery问题,而不是Wordpress /插件问题.

这是我的代码.现在,我正在使用wp-gmappity-easy-google-maps插件来制作地图,但我也尝试了综合谷歌地图插件.两者都在标签之外工作得很好.

HTML:

// Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
// HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Map Tab</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
    <h2>Tab 1 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <h2>Tab 2 Content</h2>
    <!-- Some Content -->
</div>
    <h2>Tab 3 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <div …

我使用我之前使用过3次的相同模板创建了一个自定义的Facebook登录页面.问题是,这次,垂直滚动条不会消失.这是我一直在使用的调整大小代码:

<script type="text/javascript">// <![CDATA[
    window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});}
    function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});}
// ]]></script>

在页面底部:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
    FB.init({
    appId : 'MY_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
// ]]></script>

我的CSS使用body {overflow: hidden;},在我的应用程序中选择"自动调整大小".问题不在于ifarme不会调整大小(确实如此),而是我右侧有一个空的垂直滚动条,不会消失.

由于iframe设计使用整个520px宽度,因此空的垂直滚动条为我提供了可怕的水平滚动条.从水平滚动条的宽度来看,它是垂直滚动条导致它而不是HTML/CSS中的任何东西(我可以找到或看到)使页面宽度超过520px.问题发生在IE8,IE7和Firefox中.

你可以在这里看到这个页面.

我从几个不同的来源尝试了一些javascript代码的变体,但没有运气.不确定这是否是我失踪的小东西,或者它是否是另一个facebook bug.任何我的其他Facebook iframe登陆页面上都不存在此问题.在寻找答案并且没有任何答案之后,我已经碰到了这个问题.