CSS треугольник, Opera неправильно дисплей:

Question

CSS для элементов, fiddle

#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.

Как это выглядит в Опере:

P.S. Пока Opera создала гораздо больше неприятностей, чем IE !!!

Answer 1

Вместо этого:

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

все, что вам нужно это:

#jump_link:after{ 
    left: 0; 
} 

, а затем он прекрасно работает в грандиозном оле»Opry (а также в других браузерах). :-)

Answer 2

Речь идет о вас: после псевдоэлемента. Для «левого» вы используете процент. В большинстве браузеров это означает процент от основного элемента, Opera будет считать этот процент от родителя. Используйте пиксели, если можете, для левой позиции (например, 35 пикселей).