-1
我的问题有点奇怪。在本地主机和服务器中显示的效果不同，如下所示。请注意：我对双方使用相同的代码。Fancybox在服务器和本地主机显示不同的效果（与滚动条和没有滚动条）
此代码已上传到服务器。 fancybox没有正确缩放，即使内容很短，也有一个滚动条。 
此代码在localhost/computer中打开。 fancybox很好地缩放以适应视口和没有滚动条。 
有人请向我解释为什么？这是我的问题的任何解决方案？希望你们中的一些人能够向我提供一些建议。谢谢！
$(document).ready(function() {
$('.fancybox').fancybox();
});.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
\t padding: 0;
\t margin: 0;
\t border: 0;
\t outline: none;
\t vertical-align: top;
}
.fancybox-wrap {
\t position: absolute;
\t top: 0;
\t left: 0;
\t z-index: 8020;
}
.fancybox-skin {
\t position: relative;
\t background: #f9f9f9;
\t color: #444;
\t text-shadow: none;
\t -webkit-border-radius: 4px;
\t -moz-border-radius: 4px;
\t border-radius: 4px;
}
.fancybox-opened {
\t z-index: 8030;
}
.fancybox-opened .fancybox-skin {
\t -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
\t box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
\t position: relative;
}
.fancybox-inner {
\t overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
\t -webkit-overflow-scrolling: touch;
}
.fancybox-error {
\t color: #444;
\t font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
\t margin: 0;
\t padding: 15px;
\t white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
\t display: block;
\t width: 100%;
\t height: 100%;
}
.fancybox-image {
\t max-width: 100%;
\t max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
\t background-image: url('../images/fancybox_sprite.png');
}
#fancybox-loading {
\t position: fixed;
\t top: 50%;
\t left: 50%;
\t margin-top: -22px;
\t margin-left: -22px;
\t background-position: 0 -108px;
\t opacity: 0.8;
\t cursor: pointer;
\t z-index: 8060;
}
#fancybox-loading div {
\t width: 44px;
\t height: 44px;
\t background: url('../images/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
\t position: absolute;
\t top: -18px;
\t right: -18px;
\t width: 36px;
\t height: 36px;
\t cursor: pointer;
\t z-index: 8040;
}
.fancybox-nav {
\t position: absolute;
\t top: 0;
\t width: 40%;
\t height: 100%;
\t cursor: pointer;
\t text-decoration: none;
\t background: transparent url('../images/blank.gif'); /* helps IE */
\t -webkit-tap-highlight-color: rgba(0,0,0,0);
\t z-index: 8040;
}
.fancybox-prev {
\t left: 0;
}
.fancybox-next {
\t right: 0;
}
.fancybox-nav span {
\t position: absolute;
\t top: 50%;
\t width: 36px;
\t height: 34px;
\t margin-top: -18px;
\t cursor: pointer;
\t z-index: 8040;
\t visibility: hidden;
}
.fancybox-prev span {
\t left: 10px;
\t background-position: 0 -36px;
}
.fancybox-next span {
\t right: 10px;
\t background-position: 0 -72px;
}
.fancybox-nav:hover span {
\t visibility: visible;
}
.fancybox-tmp {
\t position: absolute;
\t top: -99999px;
\t left: -99999px;
\t visibility: hidden;
\t max-width: 99999px;
\t max-height: 99999px;
\t overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
\t position: absolute;
\t top: 0;
\t left: 0;
\t overflow: hidden;
\t display: none;
\t z-index: 8010;
\t background: url('../images/fancybox_overlay.png');
}
.fancybox-overlay-fixed {
\t position: fixed;
\t bottom: 0;
\t right: 0;
}
.fancybox-lock .fancybox-overlay {
\t overflow: auto;
\t overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
\t visibility: hidden;
\t font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
\t position: relative;
\t text-shadow: none;
\t z-index: 8050;
}
.fancybox-opened .fancybox-title {
\t visibility: visible;
}
.fancybox-title-float-wrap {
\t position: absolute;
\t bottom: 0;
\t right: 50%;
\t margin-bottom: -35px;
\t z-index: 8050;
\t text-align: center;
}
.fancybox-title-float-wrap .child {
\t display: inline-block;
\t margin-right: -100%;
\t padding: 2px 20px;
\t background: transparent; /* Fallback for web browsers that doesn't support RGBa */
\t background: rgba(0, 0, 0, 0.8);
\t -webkit-border-radius: 15px;
\t -moz-border-radius: 15px;
\t border-radius: 15px;
\t text-shadow: 0 1px 2px #222;
\t color: #FFF;
\t font-weight: bold;
\t line-height: 24px;
\t white-space: nowrap;
}
.fancybox-title-outside-wrap {
\t position: relative;
\t margin-top: 10px;
\t color: #fff;
}
.fancybox-title-inside-wrap {
\t padding-top: 10px;
}
.fancybox-title-over-wrap {
\t position: absolute;
\t bottom: 0;
\t left: 0;
\t color: #fff;
\t padding: 10px;
\t background: #000;
\t background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
\t only screen and (min--moz-device-pixel-ratio: 1.5),
\t only screen and (min-device-pixel-ratio: 1.5){
\t #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
\t \t background-image: url('../images/[email protected]');
\t \t background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
\t }
\t #fancybox-loading div {
\t \t background-image: url('../images/[email protected]');
\t \t background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/71835177135/jquery-fancybox.js"></script>
<a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a>
是否有任何理由不升级到v3？ – Janis
@Janis你是指这个？ http://fancyapps.com/fancybox/3/ – Eelyn
当然...... – Janis