固定位置无法在Chrome中使用 [英] Fixed Position not working in Chrome
问题描述
我一直在喋喋不休地为这个问题烦恼了很多小时，现在却徒劳无功。您的帮助是SOOO的赞赏。
I have been cracking my head over this one for so many hours now in vain .. Your help is SOOO appreciated.
我正在为一个网站创建一个网站朋友。我通常不使用Ajax，但他购买了此模板并要求我进行所需的修改。一切都很顺利，直到我达到这一点。
I'm creating a website for a friend. I usually don't use Ajax, but he purchased this template and asked me to do the modifications needed. Everything is going well, until I reached this point.
有一个画廊，我的朋友想要独特的东西。我目前想要达到的目标是，当成员点击图片时，会在Iframe中打开一个页面。
There's a gallery, and my friend wants something unique. What I want to achieve at the moment is, When a member clicks an image, it opens a page in Iframe.
我希望这个iframe能够覆盖网站，就像它是一个独立的页面（就像一个图层）。
I want this Iframe to cover the website, like it's an independent page (Like a layer).
我为此使用了Jquery。我有Iframe Container div。当一个成员点击图片时，Iframe div变得可见，覆盖了视口。
I used Jquery for this purpose. I have the Iframe Container div in place. When a member clicks the image.. the Iframe div becomes visible covering the viewport.
这是网页。
http://weahub.com/HH2/Nature.php
它的工作原理与我在FireFox中需要的一样。但在Chrome上，它的行为有所不同。您可以在浏览器中查看页面源代码/ CSS，但我会分享下面的代码。
It works exactly as I need it in FireFox. But on Chrome it acts differently. You can probably view the page source / CSS in your browser, but I will share the codes below.
index.php：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hamada Hajuj | Photographer Portfolio</title>
<link rel="shortcut icon" href="img/fi.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="HoverEffect/css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="HoverEffect/js/modernizr.custom.72835.js"></script>
<!--[if lt IE 9]>
<div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>
<![endif]-->
</head>
<body id="mainBody">
<script>
function closeImage() {
$('#iframeContainer').fadeOut('normal');
$('#iframeClose').fadeOut('normal');
$('#mainBody').css("overflow-y", "scroll");
}
</script>
<div id="iframeContainer"></div>
<div id="iframeClose"><a onclick="closeImage();">Back to Gallary</a></div>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
<!-- end fullscreen gallery -->
<div id="imgSpinner"></div>
<a href="#" id="prevButton"></a>
<a href="#" id="nextButton"></a>
<div id="galleryHolder">
<div id="imageHolder">
<img src="img/bg_pic2.jpg" alt="" data-image-align="top_right">
</div>
</div>
<div id="inner">
<ul>
<li><a href="img/bg_pic2.jpg" data-image-align="top_right"></a></li>
<li><a href="img/bg_pic3.jpg" data-image-align="top_left"></a></li>
<li><a href="img/bg_pic1.jpg" data-image-align="top_right"></a></li>
<li><a href="img/bg_pic4.jpg"></a></li>
<li><a href="img/bg_pic5.jpg"></a></li>
</ul>
</div>
<!-- end fullscreen gallery -->
<header>
<div class="container">
<!--logo and company name-->
<h1><a href="/" class="navbar-brand"><img src="img/logo.png" class="img-responsive" alt="Hamada Hajuj Photographer Portfolio"></a></h1>
<!--menu-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<nav id="mainNav" data-follow="location" data-type="navigation">
<ul>
<li><a href="/"></a></li>
<li><a href="/gall.php">gallery</a>
<div class="sf-mega">
<ul>
<li><a href="#">Urban City</a></li>
<li><a href="#">Studio Modeling</a></li>
<li><a href="#">People</a></li>
<li class="last"><a href="Nature.php">Nature</a></li>
</ul>
</div>
</li>
<li><a href="/about.php">about me</a></li>
<li><a href="/blog.php">blog</a></li>
<li><a href="/contacts.php">contacts</a></li>
</ul>
</nav>
</div>
</nav>
</div>
</header>
<article id="content" data-follow="location" data-type="switcher">
</article>
<div id="other_pages" class="container" data-follow="location" data-type="switcher" data-flags="ajax">
<?php /*
<!--<div id="gallery" data-id="gallery"></div>-->
*/?>
</div>
<footer>
<ul class="soc_links follow-links">
<li><a href="#" class="facebook"><img src="img/soc_icon1.png" alt=""></a></li>
<li><a href="#" class="googleplus"><img src="img/soc_icon2.png" alt=""></a></li>
<li><a href="#" class="twitter"><img src="img/soc_icon3.png" alt=""></a></li>
</ul>
<div class="copyright">© <span id='year'></span> • <a href="/privacy.php">privacy policy</a><br><!-- {%FOOTER_LINK} --></div>
</footer>
</div>
</body>
<！ - < div id =gallerydata-id =gallery>< / div> - >
* /？>
< / div>
< footer>
< ul class =soc_links follow-links>
< li>< a href =＃class =facebook>< img src =img / soc_icon1.pngalt =>< / a>< / li> ;
< li>< a href =＃class =googleplus>< img src =img / soc_icon2.pngalt =>< / a>< / li> ;
< li>< a href =＃class =twitter>< img src =img / soc_icon3.pngalt =>< / a>< / li> ;
< / ul>
< div class =copyright>& copy; < span id ='year'>< / span> &安培;公牛; < a href =/ privacy.php>隐私政策< / a>< br><！ - {％FOOTER_LINK} - >< / div>
< / footer>
< / div>
< / body>
ajax/Nature.php :
ajax / Nature.php：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contacts</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1" style="float:center;">
<h3 style="margin-top:-20px; margin-bottom:20px;">Gallery --> Nature</h3>
<script>
function loadImage(id) {
document.getElementById('iframeContainer').innerHTML='<iframe class="imageIframe" src="http://akramabdulfattah.com"></iframe>';
var width=$( window ).width();
var height=$( window ).height();
$("#iframeContainer").css("width", width);
$("#iframeContainer").css("height", height);
$("#mainBody").css("overflow-y", "hidden");
$("#iframeContainer").fadeIn(0500);
$("#iframeClose").fadeIn(0500);
}
</script>
<a onclick="loadImage(123);"><img src="Photos/Nature_Pic1_Thumbnail.jpg" alt="Nature Image 1" class="thumbImage"><div class="hover"><span class="icon"></span></div></a><br>
<a onclick="loadImage(123);"><img src="Photos/Nature_Pic1_Thumbnail.jpg" alt="Nature Image 1" class="thumbImage"><div class="hover"><span class="icon"></span></div></a>
</div>
</div>
</div>
</body>
</html>
and in my style sheet I have this (concerning this activity) :，在我的样式表中我有这个（关于这个活动）：
Things I have already tried :
I read that Chrome changed few settings regarding rendering fixed position with Z-index, or using fixed position with transformed objects. I tried clear all transformation in Z and in 3D , didn't work, and tried do it with only fixed position (no z-index) and didn't work either. I tried some desperate solutions as well, not worth mentioning, and all I concluded is, Chrome is ignoring the fixed positioning for some reason that I can't figure out :( 我已经试过的事情：
我读到Chrome改变了关于使用Z-index渲染固定位置的一些设置，或者使用固定位置和变换对象。我尝试清除Z和3D中的所有转换，没有奏效，并试图只用固定的位置（没有z-index）来做，也没有工作。我尝试了一些绝望的解决方案，不值得一提的是，所有我的结论是，铬是由于某种原因，我无法弄清楚:( \\ / b>
您的帮助非常感谢。
your help is HIGHLY APPRECIATED.
非常感谢您提前致谢！
推荐答案
我认为这是因为你有style.css文件的透视CSS属性（它不在你粘贴的代码中，而是在你链接的网站的源文件中）。
I think it's happening because of the "perspective" css properties you have your style.css file (it's not in the code you pasted, but it's in the source file on the site you linked to).
您可以在style.css文件中删除这些行：
You can remove these lines in the style.css file:
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
我不知道它们在那里，但是当我删除它们时，它似乎可以解决您的问题，而不会改变任何我能看到的东西。
I don't know what they are there for, but when I removed them it seemed to fix your issue without altering anything else that I could see.
这篇关于固定位置无法在Chrome中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
