sách gpt4 ăn đã đi

html - 固定位置在 Chrome 中不起作用

In lại 作者:搜寻专家 更新时间:2023-10-31 21:56:38 24 4
mua khóa gpt4 giày nike

我正在创建这些叠加的上一个和下一个箭头,就像这个网站上的一样 - http://www.usatoday.com

我遇到的问题是在 Chrome 中,箭头不会保持固定,当我向下滚动页面时,箭头会随着页面一起上升,你再也看不到它们了。奇怪的是,在 Firefox 中,他们工作并保持在顶部:45% 位置:一直固定,就像他们应该的那样。这是它在 ff 中如何工作的截图:https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG

这里是 chrome:https://www.dropbox.com/s/zgr2zhkcnohykgj/chrome.PNG

箭头的 html:

  

和 CSS:

.overlay-arrows{
vị trí: cố định;
top: 45%;
trái: 0;
chiều rộng: 100%;
z-index: 9999;
overflow: visible;
}
.front-arrow-wrapper{
width: 1104px;
vị trí: tương đối;
margin: 0 auto;
}
.prev-link{
trái: 0;
float: left;
trang trí văn bản: không có;
}
.next-link{
right: 0;
float: phải;
trang trí văn bản: không có;
}
.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: phải;
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);
cỡ chữ: 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);
}

câu trả lời hay nhất

我使用了 cjspurg 方法并且有效。再次感谢!

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0);

关于html - 固定位置在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19117737/

24 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress