jscrollpane inside colorbox - iframe 底部被切断？

Question

我正在使用 colorbox 打开一个 iframe，在其中调用 jscrollpane 以允许滚动。它可以工作，但在某些情况下（不是全部，看不到图案）下部可能 100px 左右被切断。此外，我无法让滚动条出现在 ipad 上。

有什么想法吗？ http://www.ainonline.com/newsmakers/2011

单击时间线中的链接即可查看我的意思是。

Answer 1

好吧，我看到的模式是最后一个文本块有时周围有段落标记，有时没有，这恰好与文本是否完全显示一致（与

...

）或某些文本保持隐藏（没有

...

< /代码>）。

不会显示最后一段文本：

<div class="articleview scrollpane" style="width:650px">
    <h1>Former Platinum Jet Pilot Gets Six Months Prison Time</h1>
    <div class="pubdate" style="color:#666; margin:10px 0; font-style:italic">August 23, 2011 - 3:20 PM</div>
    Blah blah blah [...] blah.
</div>

将显示最后一段文本：

<div class="articleview scrollpane" style="width:650px">
    <h1>Former Platinum Jet Pilot Gets Six Months Prison Time</h1>
    <div class="pubdate" style="color:#666; margin:10px 0; font-style:italic">August 23, 2011 - 3:20 PM</div>
    <p>Blah blah blah [...] blah.</p>
</div>

如果这可以解决该问题，请告诉我。

对于问题的另一部分（实际上应该在单独的问题中提出），iPad 不在网站上使用滚动条。它使用手势。不过，不用担心——该网站运行良好。

Answer 2

在通过 iframe 包含的每个页面上，您必须确保明确声明正文的边距，如下所示：

body {
  margin: 0px;
}

如果您不这样做，浏览器将使用它的默认设置，这意味着不同的浏览器也会产生不同的结果。

您应该查看： normalize.css

这是一个设计的样式表将所有浏览器重置为相同的标准样式规则。

Answer 3

这里，您正在加载的页面在正文（用户代理样式表）上有 8 像素的边距，这导致页面有点偏离右侧和底部。那么看起来您丢失了部分页面。

放置边距：0px；在 body 元素上，例如：

body {
    margin: 0px;
}

Answer 4

我有类似的问题......这是我的解决方案

$(".gallery").colorbox({
            iframe:true,
            fastIframe:false,
            width:"630px",
            height:"555px",
            scrolling: false,
            rel:'gallery', 
            slideshow:false, 
            onComplete:function(){ $(".cboxIframe").contents().find("body").css("margin","0px");
                //$("#banner").insertBefore("#cboxLoadedContent")
            }
        });