Question

我的测试网站：rockitmembers.us

网站是Wordpress.org，不使用插件。

header.php中的代码是：

<link rel="stylesheet" href="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />

footer.php中的此代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.rockitmembers.us/wp-content/themes/acosmin-v3/fancybox/source/jquery.fancybox.pack.js"></script>
    <script>
    $(document).ready(function() {
    $(".iframe").fancybox({
       fitToView : false,
       autoSize : false,
       scrolling : 'no',
    maxWidth        : 820,
    maxHeight       : 600,
    width           : 800,
    height          : 600,
    type            : 'iframe'
        });
    });
    </script>

此代码在我的WordPress帖子中，用于购买许可证按钮：

<a href="http://www.rockitmembers.us/fancyboxtest.html" class="iframe rollover"><span class="displace">Buy A Beat</span></a>

点击第一篇文章（我的反思）上的“购买许可证”按钮。 Fancybox功能很好，除了它为fancybox-lock添加一个17px的边距权限，这会弄乱背景的外观，我认为它正在推动滚动条？我不确定。当您在Chrome中进行检查时，单击购买许可按钮时会添加<body class="fancybox-lock" style="margin-right: 17px;">。

我通过编辑jquery.fancybox.css并取出overflow-y: scroll;来尝试此帖Jquery Fancybox 2 adds a margin-right?中的建议，但仍未解决问题。

有什么想法吗？

Answer 1

看起来它与Fancybox毫无关系。看看你的实现，看起来每个<ul>中“详细”部分的硬编码宽度正在推动Fancybox的边缘。您应该能够消除cartstyles.css中的大多数浮点数，然后您不需要在这些元素上指定宽度。

编辑：我不建议将此作为一种习惯，但如果唯一的投诉是额外的保证金，请尝试将此规则添加到您的样式表中：

.fancybox-lock{
    margin-right:0 !important;
}

!important会覆盖正常的级联，并允许您覆盖Fancybox应用的内联样式。不过，无论真正的问题是什么，它都只是掩盖。

Answer 2

这是我对同一问题的解决方案。在研究了几个答案之后，我的发现结合起来了。在jquery.fancybox.css中，对overlay helper部分进行以下更改。

<强> BEFORE

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {
 overflow: auto;
 overflow-y: scroll;
}

AFTER

.fancybox-lock {

}

.fancybox-lock body {

}

.fancybox-lock-test {

}

.fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;

 display: none;
 z-index: 99999998010;
 background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

.fancybox-lock .fancybox-overlay {

}

Fancybox通过添加边距来推动背景

2 个答案: