-1
私の問題はちょっと奇妙です。以下に示すように、ローカルホストとサーバーで異なる効果が見られます。注意してください：私は両側に同じコードを使用しています。ファンシーボックスは、サーバーとローカルホストで異なる効果（スクロールバーとスクロールバーなし）を表示します
このコードはサーバーにアップロードされています。ファンシーボックスは適切に拡大/縮小されておらず、コンテンツが短くてもスクロールバーがあります。 
このコードはlocalhost/computerで開かれています。ファンシーボックスは、ビューポートに収まるようにうまくスケーリングされ、スクロールバーはありません。 
誰かが私に説明する理由はありますか？それは私の問題の解決策ですか？あなたの何人かが私にいくつかのアドバイスを提供できると願っています。ありがとう！
$(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
@ジャニスこれはどういう意味ですか？ http://fancyapps.com/fancybox/3/ – Eelyn
もちろん...... – Janis