CSS三角形，歌劇錯誤顯示：

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 */ 
} 

正確顯示：瀏覽器，Firefox，IE。

它的外觀在Opera：

附：到目前爲止，Opera創造了比IE更多的麻煩！

Answer 1

取而代之的是：

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

所有你需要的是這樣的：

#jump_link:after{ 
    left: 0; 
} 

，然後它工作在盛大的醇」普里（以及其他瀏覽器）就好了。 :-)

Answer 2

這是關於你的：after僞元素。對於'左'你使用的是一個百分比。大多數瀏覽器都將此視爲主要元素的一個百分比，Opera會將這個百分比作爲父元素的一部分。如果您可以在左邊位置使用像素（例如35px）。