[英]CSS triangle, Opera wrong display:
CSS元素, 小提琴
#scroll_jump
{
margin-top: 310px;
position: fixed;
margin-left: 20px;
display: none;
}
#jump_link
{
display: block;
width: 70px;
height: 20px;
background: #BBDAF7;
color:white;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding-left: -1px;
}
#jump_link:after
{
content: '';
position: absolute;
width: 0;
height: 0;
border: 35px solid;
border-bottom-color:#BBDAF7;
border-top-color:white;
border-left-color:#ffffff ;
border-right-color: #ffffff;
top: 0;
margin-top: -70px;
left: 49%;
margin-left: -35px; /* adjust for border width */
}
正确显示:Chrome,Firefox,IE。
在Opera中的外观:
PS到目前为止,Opera造成的麻烦比IE还要多!!!
代替这个:
#jump_link:after{
left: 49%;
margin-left: -35px;
}
您需要的是:
#jump_link:after{
left: 0;
}
然后,它可以在盛大的Opry(以及其他浏览器)中正常工作。 :-)
与您的:after伪元素有关。 对于“左”,您使用百分比。 大多数浏览器将其表示为主要元素的百分比,Opera将其以其父元素的百分比表示。 如果可以的话,请使用像素(例如35像素)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.