首次打开时，Colorbox 未在适当的高度打开答案

【问题标题】：Colorbox doesn't open at proper height when first opened首次打开时，Colorbox 未在适当的高度打开
【发布时间】：2010-07-11 18:59:15
【问题描述】：

所以我使用colorbox 插件作为联系表单。我只是默认的颜色框属性，所以它应该自动调整到它包含的 div（对吗？）。

这个颜色框内容第一次加载时有一个小的垂直滚动条。我在Firefox 和chrome OSX 看到它偶尔发生

尝试 #1

$("a.modalAutosize").each(function(){
    $(this).colorbox();

});

示例中的活动代码

$("a.modalAutosize").each(function(){
    $(this).colorbox({onOpen: function(){$.fn.colorbox.resize()}});

});

【问题讨论】：

能否贴出点击联系链接时打开Colorbox的具体代码？
我在 Firefox 中看不到滚动条。
不幸的是，故障似乎相当不一致......
我遇到了同样的问题。它似乎完全随机发生，我无法重现它......你找到了明确的解决方案吗？

标签： jquery colorbox

【解决方案1】：

我已经调查了这个问题。

尝试查看您通过 ajax 加载的内容。如果有一些图片没有“height”和“width”属性，就会出现滚动条。

发生这种情况是因为浏览器不知道图像的大小，并且不会等到它加载后才计算页面布局。第一次加载后，图像在缓存中，浏览器可以计算大小。

尝试为您的图像指定尺寸。对我来说它有效。

【讨论】：

【解决方案2】：

$("a.modalAutosize").each(function(){
   $(this).colorbox();  
});

您不必在此处编写each() 函数。您可以关闭滚动。

例如。

$("a.modalAutosize").colorbox({scrolling: false});

【讨论】：

没用。因为第一次没有足够的高度，有些内容是不可见的。重新打开后 - 一切都很好。有什么想法吗？

【解决方案3】：

我也遇到过这个问题，只是内容中没有任何图像。我可以通过在一个 div 上将宽度和高度都设置为 100% 来解决这个问题，该 div 包装了我在颜色框中呈现的内容。

【讨论】：

【解决方案4】：

我没有使用图片，所以接受的答案对我不起作用。此外，它仅在使用 inline: true 时发生，并且出现在右下角 X 按钮的高度上。为了修复它，我添加了一个名为 inlineHeightAdjustment 的新属性，然后在 getHeight 函数中使用它。

在 jquery.colorbox.js 中：

function getHeight() {
   settings.h = settings.h || $loaded.height();
   settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
   // Adjust height for inline boxes
   settings.h = settings.inline ? settings.h + settings.inlineHeightAdjustment : settings.h;
   return settings.h;
}

然后在我的页面上：

$(".inlineColorBox").colorbox({
   inline: true,
   inlineHeightAdjustment: 25,
});

您可能可以通过接受一个字符串来使其更好，这样您就可以指定 em、px、% 等，但我知道我想要像素，因此是数值假设。

【讨论】：