html - CSS三角，Opera错误显示：

Question

元素的 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 多得多！！！

Answer 1

而不是这个：

#jump_link:after{
    left: 49%;
    margin-left: -35px;
}

你只需要这样：

#jump_link:after{
    left: 0;
}

然后它在grand ol' Opry（以及其他浏览器）中工作得很好。:-)

Answer 2

这是关于你的 :after 伪元素。对于“左”，您使用的是百分比。大多数浏览器将其视为主要元素的百分比，Opera 将其视为父元素的百分比。如果可以，请使用像素作为左侧位置（例如 35 像素）。