Question

我遇到了FancyBox的问题。它应该根据图像的尺寸自动调整包装器的大小。它不是那样做的。特别是它太小了。

这是我用过的FancyBox jQuery代码：

$("a[rel=photo_gallery]").fancybox({
    'type'              : 'image',
    'padding'           : 10,
    'autoScale'         : true,
    'cyclic'            : true,
    'overlayOpacity'    : 0.7,
    'overlayColor'      : '#000000',
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'titlePosition'     : 'over',
    'titleShow'         : false,
    'resize'            : 'Auto'
});

还有其他人遇到过这个问题吗？

提前感谢您的帮助。

Answer 1

想出来......

这是我的CSS重置被FancyBox CSS绊倒了。我将DIV的盒子大小调整为'border-box'。

修复是进入FancyBox CSS并声明wrap，outer和inner DIV的box-sizing为'content-box'。

像这样：

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

希望这会帮助其他人遇到这个问题。

Answer 2

上面对我不起作用（FB 3beta）。

这是我的解决方案：

.fancybox-wrap, .fancybox-wrap *{
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -safari-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

Answer 3

我在弹出窗口中显示任意HTML时出现同样的问题。我发现这是修复它所需要的（当使用Eric Meyer的reset.css时）是这样的：

.fancybox-overlay
{
    line-height: normal;    
}

reset.css文件中的违规代码是

body 
{
    line-height: 1;
}

免责声明：仅在IE9和Chrome中测试过 - 但它似乎有效。这适用于编写本文时最新版本的fancybox。

Answer 4

我还发现摆脱盒子大小的全局重置有助于：

/*
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
*/

令人讨厌的部分是找到依赖边框的所有项目，然后为这些项目启用它。幸运的是，我到目前为止只发现了3个...... Firebug / Developer Tools帮助我们解决了很多问题。

Fancybox包装器无法正确自动调整图像尺寸

4 个答案: