Question

我不能为我的生活找出为什么我的iframe页面标签上出现滚动条。宽度设置为500px，从515px一次将其击倒5px。没有边距，高度设置为“流动”。当我查看iframe直接显示的html页面时，没有多余的空白区域，所以看起来Facebook正在iframe的左侧添加空格（边距或填充？）。奇怪的是，滚动距离保持不变，因为我将页面从515px缩小到500px。此外，高度的“流体”选项似乎不适用于iframe，因此我无法在CSS中使用隐藏标记，或者我的一半内容被切断。

这对其他人来说是个问题吗，还是我做错了什么？我将发布以下页面的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css"  />
<script language="javascript" src="facebox/facebox.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox()
    })
</script>

</head>

<body>

<div id="container" style="width:500px">

    <div id="header">
<a href="http://www.fwymca.org"><img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left"  /></a>
<img src="head_images/ymca1.jpg" align="right">
    </div>
    <div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
    <div id="content1"><a href="cent_popup.html" rel="facebox"><img src="images/cent_loc3.jpg" vspace="5"></a>

   <a href="park_popup.html" rel="facebox"><img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10"></a>
   <a href="wells_popup.html" rel="facebox"><img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6"></a>
  </div>
  <div id="content2"><a href="jorg_popup.html" rel="facebox"><img src="images/jorg_loc3.jpg" vspace="5"></a>
  <a href="renpt_popup.html" rel="facebox"><img src="images/ren_loc3.jpg" width="240" height="216" vspace="10"></a>
  <a href="whit_popup.html" rel="facebox"><img src="images/whit_loc3.jpg" vspace="5"></a>
  <a href="camp_popup.html" rel="facebox"><img src="images/camp_loc3.jpg" vspace="5"></a>
  </div>
</div>

</body>
</html>

更新：我找到了一些代码，让iframe正确调整大小并摆脱滚动条。但是，这似乎导致我的Facebox实现搞砸了。没有出现Facebox识别屏幕位置的变化以更改Facebox的中心，因此它会弹出页面顶部而不是屏幕的当前中心。

Answer 1

我有一个类似的问题，即使它们处于非活动状态时我也会显示垂直和水平滚动条（在Opera和Firefox中，而在IE和Chrome中，页面显示时没有滚动条）。我在应用程序设置中选择了“流畅”的高度和宽度。当我将高度设置恢复为“可设置”并再次使用FB.Canvas.setSize函数时，问题终于消失了。

对我来说，似乎Facebook的高度“流畅”设置目前并不适用于所有浏览器，也许尝试将其设置回可设置并从那里开始。

Answer 2

转到https://developers.facebook.com/apps/YOUR_APP_ID/advanced然后转到滚动到“画布设置”，然后根据需要设置“画布宽度”和“画布高度”

在iframe中显示的滚动条，宽度仅为500px，高度设置为流体

2 个答案: