Firefox中的Fancybox2 CSS问题
使用Fancybox2时，我注意到一个奇怪的错误，只有在使用Firefox时才会出现。当Fancybox打开时，Fancybox叠加的主页面内容会移到屏幕的最右侧，这只会在刷新页面时修复。
Safari中的Fancybox2显示（正确）
Firefox中的Fancybox2显示（不正确）
代码如下： 的 HTML
<!DOCTYPE html>
<head>
<pre></pre><pre></pre><pre></pre><pre></pre>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share. - Skyfall (2012)</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<!--<link rel="stylesheet" href="stylesheet.css" type="text/css" />-->
<link rel="stylesheet" href="fonts.css" type="text/css" />
<link rel="stylesheet/less" type="text/css" href="stylesheet.less" />
<script src="less-1.3.3.min.js" type="text/javascript"></script>
<!--Start FancyBox 2-->
<!-- Add jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
(function ($, F) {
F.transitions.resizeIn = function() {
var previous = F.previous,
current = F.current,
startPos = previous.wrap.stop(true).position(),
endPos = $.extend({opacity : 1}, current.pos);
startPos.width = previous.wrap.width();
startPos.height = previous.wrap.height();
previous.wrap.stop(true).trigger('onReset').remove();
delete endPos.position;
current.inner.hide();
current.wrap.css(startPos).animate(endPos, {
duration : current.nextSpeed,
easing : current.nextEasing,
step : F.transitions.step,
complete : function() {
F._afterZoomIn();
current.inner.fadeIn("fast");
}
});
};
}(jQuery, jQuery.fancybox));
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
},
autoSize : true,
autoResize : true,
nextMethod : 'resizeIn',
nextSpeed : 250,
prevMethod : false
});
});
</script>
<!--End FancyBox 2-->
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
<script type="text/javascript" src="modernizr.custom.04022.js"></script>
<script src="jw/jwplayer.js"></script>
<script>jwplayer.key="BWCyudkngknrbqSMph0m087b4GQF/qHhYKvh9g=="</script>
</head>
<body>
<a id="skiplink" href="#content">Skip to main content</a>
<header>
<p class="logo"><a href="index.php" id="logo">Screening</a></p>
<section id="header_search">
<form id="search" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</section>
</header>
<div id="content">
<section id="cover"><img src="http://cf2.imgobject.com/t/p/w1280/hMzIUb6x84bfrR8pRllOuAqQ09R.jpg" title="Skyfall backdrop" alt="Skyfall backdrop" /> </section>
<h1 id="movie_title">Skyfall (2012)</h1>
<section id="top_strip">
<section id="poster"><ul><li><a href="http://cf2.imgobject.com/t/p/original/eqWLvQQXHhkLr4pxBEthR8xLFej.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"><img src="http://cf2.imgobject.com/t/p/w342/eqWLvQQXHhkLr4pxBEthR8xLFej.jpg" title="Skyfall poster" alt="Skyfall poster" /></a></li><li><a href="http://cf2.imgobject.com/t/p/original/dkhTLg9yNtA3QH3Lseiq8W0jOhg.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/4LngaGmhSNaOo07KqpcT1QMYz3y.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/lXqrpFwQnoh5mFC7FKS8XAAwnA.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/rD10NppOLSxOq7FuIL7PIUDM9yI.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/wODw2XlZeSXft7NLL07YHjdCQHt.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/4l9t9LCDvxMP1wgOaOmX08LiiGJ.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/yZUxdqYA9LcZacq5VgRPHqQKli1.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/g2OeuX49DXSRiH3tMksKtlVDYtR.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/hvm0lSEk8tiNjss4YalWtRdNoOi.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/lurBcDvS9WO61qZzmYm56n7NZgE.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/wMgv1bMDRvQvdG9Pr3yyiONSI2H.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/jXc1w867BHBEVv0zUAP0N2TcFMN.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/upUMajndLqa3RMglnARH7Fmn6XE.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/l94j6AtQSJ91XQFjy1gefi2A60y.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/bry7pxFC1QF7tF2xQ7RALwp2nzM.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/h0GjF6Y7RNNrWmEsg5xHL5gha2W.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/1Sr9JQkjN5SRZsTQJTTtPrhGCvV.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/kAh68MTIIHubXXMIAQKn2QMjeQX.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/hgyGuDUYj9GnVPBlREibbGwE2PN.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/er3YsRrnGicJr8ntm7zWhohvaPp.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/9brz57emVaCb7dKlDV0f7HKnXMq.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/fCbPGmFqKRPJbsB4u03bWAi0d7p.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/tm5q3eio7LqDPmudjaOUQfGEr57.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/39nyO7HwnVv0O1KoZBbDNsSrZZJ.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/nJ4YvkeNI1r8N7sb7NbkB7JKVjG.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/2TViGL2ZCFvkW49srIWRoqknaVF.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/yP2YuOoLwLC8oWUBsGDmEPi9WzC.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li><li><a href="http://cf2.imgobject.com/t/p/original/9ByJLDxFkU7kGvSb8Qf6p3pz8Vp.jpg" class="fancybox-button" data-fancybox-group="posters" title="Skyfall poster"></a></li></ul> </section>
<section id="overview"> <section id="synopsis">
PHP
<!DOCTYPE html>
<head>
<?php include 'api.php'; ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share. - <?php echo ($title); ?> (<?php echo $year; ?>)</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<!--<link rel="stylesheet" href="stylesheet.css" type="text/css" />-->
<link rel="stylesheet" href="fonts.css" type="text/css" />
<link rel="stylesheet/less" type="text/css" href="stylesheet.less" />
<script src="less-1.3.3.min.js" type="text/javascript"></script>
<!--Start FancyBox 2-->
<!-- Add jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
(function ($, F) {
F.transitions.resizeIn = function() {
var previous = F.previous,
current = F.current,
startPos = previous.wrap.stop(true).position(),
endPos = $.extend({opacity : 1}, current.pos);
startPos.width = previous.wrap.width();
startPos.height = previous.wrap.height();
previous.wrap.stop(true).trigger('onReset').remove();
delete endPos.position;
current.inner.hide();
current.wrap.css(startPos).animate(endPos, {
duration : current.nextSpeed,
easing : current.nextEasing,
step : F.transitions.step,
complete : function() {
F._afterZoomIn();
current.inner.fadeIn("fast");
}
});
};
}(jQuery, jQuery.fancybox));
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
},
autoSize : true,
autoResize : true,
nextMethod : 'resizeIn',
nextSpeed : 250,
prevMethod : false
});
});
</script>
<!--End FancyBox 2-->
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
<script type="text/javascript" src="modernizr.custom.04022.js"></script>
<script src="jw/jwplayer.js"></script>
<script>jwplayer.key="BWCyudkngknrbqSMph0m087b4GQF/qHhYKvh9g=="</script>
</head>
<body>
<?php include 'header.html'; ?>
<div id="content">
<section id="cover"><?php
if ($backdrop_present==true) {
echo '<img src="' . $image_url . '" title="' . $title . ' backdrop" alt="' . $title . ' backdrop" />';
} else {
//echo '<img src="assets/images/backdrop_unavailable.png" title="Backdrop unavailable" alt="Backdrop unavailable" />';
echo '<div id="no_backdrop">';
}?>
</section>
<h1 id="movie_title"><?php echo $title; ?> (<?php echo $year; ?>)</h1>
<section id="top_strip">
<section id="poster"><?php
if ($backdrops['posters'][0]['file_path'] != '') {
echo '<ul>';
foreach ($backdrops['posters'] as $key => $post) {
echo '<li><a href="http://cf2.imgobject.com/t/p/original' . $post['file_path'] . '" class="fancybox-button" data-fancybox-group="posters" title="' . $title . ' poster">';
if ($key == 0) {
echo '<img src="http://cf2.imgobject.com/t/p/w342' . $post['file_path'] . '" title="' . $title . ' poster" alt="' . $title . ' poster" />';
}
echo '</a></li>';
}
echo '</ul>';
} else {
echo '<img src="assets/images/poster_unavailable.png" title="Poster unavailable" alt="Poster unavailable" />';
}?>
</section>
如果有人能够解释为什么会这样，以及如何解决它，我将不胜感激！如果需要更多信息，我会很乐意尽我所能提供它！
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？