我正在创建这些叠加上一个和下一个箭头,就像本网站上的那些 –
http://www.usatoday.com
我得到的问题是在Chrome中,箭头不会保持固定,当我向下滚动页面箭头随页面上升而你再也看不到它们了.奇怪的是,在Firefox中他们的工作并保持在最高位置:45%的位置:他们应该像往常一样固定.
以下是ff:https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG中如何工作的截图
这是铬:https://www.dropbox.com/s/zgr2zhkcnohykgj/chrome.PNG
箭头的html:
<div class="overlay-arrows"> <div class="front-arrow-wrapper"> <a href="#" rel="prev" class="prev-link"> <div class="prev-icon"> </div> <div class="prev-overlay"> <span class="categ-next">Category for prev</span> <p>Title of the post for prev</p> </div> </a> <a href="#" rel="next" class="next-link" > <div class="next-icon"> </div> <div class="next-overlay"> <span class="categ-next">Category for next</span> <p>Title of the post for next</p> </div> </a> </div> <!--end .front-arrow-wrapper --> </div> <!--end overlay-arrows -->
和CSS:
.overlay-arrows{ position: fixed; top: 45%; left: 0; width: 100%; z-index: 9999; overflow: visible; } .front-arrow-wrapper{ width: 1104px; position: relative; margin: 0 auto; } .prev-link{ left: 0; float: left; text-decoration: none; } .next-link{ right: 0; float: right; text-decoration: none; } .prev-icon{ background: url(../img/prev.png) 100% 0 no-repeat; height: 77px; width: 45px; float: left; } .next-icon{ background: url(../img/next.png) 100% 0 no-repeat; height: 77px; float: right; width: 45px; } .next-overlay,.prev-overlay{ opacity: 0; filter: alpha(opacity=0); width: 250px; width: 250px; height: 77px; color: #F16C14; background: rgba(0,0.7); font-size: 14px; font-family: Helvetica,Arial,"Lucida Grande",sans-serif; } .next-link:hover>.next-icon{ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; background: url(../img/next-hover.png) 100% 0 no-repeat; } .next-link:hover>.next-overlay{ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; opacity: 10; filter: alpha(opacity=100); }
解决方法
我使用了cjspurg方法,它起作用了.再次感谢!
-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);