3
不起作用
我創建這些覆蓋前面和後面的箭頭，這樣網站上的那些 - http://www.usatoday.com位置固定在Chrome
而且我得到的是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, 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);
}
此代碼在Mac和Windows（http://jsfiddle.net/Lj3RG/）上給出了Chrome中垂直居中的箭頭。箭頭周圍是否包含元素會導致問題，或頁面上是否有更改這些樣式的任何JavaScript？ – cjspurgeon
我發現有3個文件，當我禁用他們的箭頭工作，但我需要他們的文章滑塊在頁面上。 https://www.dropbox.com/s/jtpflj57yxqmed4/dan.css https://www.dropbox.com/s/db2wdzll4p1fmw6/jquery.bxslider.css https://www.dropbox.com/s/i5ceq3yoinxqzct/ jquery.validate.min.js我無法想象會發生什麼，只會影響Chrome和Firefox中的箭頭，它們完美地工作。 – Lox
我仍然無法重現問題，所以我猜想它是包含元素的樣式。無論是箭頭的包裝，還是內容的包裝。我發現了其他關於Chrome位置的報告：固定問題。你可以嘗試'-webkit-transform：translateZ（0）;'在固定元素上 - http://stackoverflow.com/questions/17068361/chrome-positionfixed-inside-positionabsolute-breaking-with-iframe-video或者可能調查z-index堆棧上下文 - http://stackoverflow.com/questions/12781115/positionfixed-not-working-in-chrome-22？ – cjspurgeon