爲什麼：之前不能在safari中看到？

Question

我有在Chrome瀏覽器的輝煌代碼：

#menu ul { 
list-style-position: inside; 
list-style-type: none; 
display: block; 
margin: 0 auto; 
padding: 0; 
} 
#menu li { 
font-size: 11px; 
width: 95px; 
display: inline-block; 
vertical-align: top; 
position: relative; 
} 
#menu li a { 
color: black; 
text-decoration: none; 
} 
#menu li a img { 
opacity: 0; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
position: absolute; 
top: 0; 
left: 22px; 
margin: 0 auto; 
-webkit-transition: opacity 0.2s linear; 
-moz-transition: opacity 0.2s linear; 
-o-transition: opacity 0.2s linear; 
-ms-transition: opacity 0.2s linear; 
} 
#menu li a:hover img { 
opacity: 1.0; 
filter: alpha(opacity=100); 
-moz-opacity: 1.0; 
} 
#menu li a:before { 
content: ""; 
display: block; 
background: url('../images/greece.gif') no-repeat center; 
width: 50px; 
height: 50px; 
margin: 0 auto; 
opacity: 1.0; 
filter: alpha(opacity=100); 
-moz-opacity: 1.0; 
-webkit-transition: opacity 0.2s linear; 
-moz-transition: opacity 0.2s linear; 
-o-transition: opacity 0.2s linear; 
-ms-transition: opacity 0.2s linear; 
} 
#menu li.news a:before { 
background: url('/images/menu/4.gif') no-repeat center; 
} 
#menu li a:hover:before { 
opacity: 0; 
filter: alpha(opacity=0); 
-moz-opacity: 0 
} 
#menu li a span.image-title { 
display: block; 
padding: 5px; 
} 
#menu li:hover a, #menu li.current.active a { 
color: red; 
} 

我不想用這種瘋狂的代碼，但我沒有別的辦法，因爲我正在與Joomla工作2.5

那麼什麼我有... 在Firefox中不工作不透明過渡。不，itworks，但以一種奇怪的方式... ...耐人尋味。

在Safari中：之前根本沒有顯示！

Web-site with this problem（不是廣告）。

Answer 1

檢查出來：http://caniuse.com/#feat=css-gencontent並檢查「已知問題」選項卡。 Safari瀏覽器不支持僞元素上的轉換。我昨天面臨同樣的問題。

Answer 2

只需添加位置：絕對

a:before{ 
position:absolute; 
content:""; 
top: 0px; 
left: 0px; 
..... 

，並確保你在已經相對位置

#menu li a{ 
position:relative; 
} 

例如這個效果很好

#menu li a:before { 
content: ""; 
display: block; 
background: url('../images/greece.gif') no-repeat center; 
width: 50px; 
height: 50px; 
position: absolute; 
opacity: 1.0; 
filter: alpha(opacity=100); 
-moz-opacity: 1.0; 
-webkit-transition: opacity 0.2s linear; 
-moz-transition: opacity 0.2s linear; 
-o-transition: opacity 0.2s linear; 
-ms-transition: opacity 0.2s linear; 
} 

非常重要對於對CSS3開發箱上漿

*, *:after, *:before { 
outline: none; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
padding:0; 
margin:0; 
} 

：和前：後總是位置：絕對和主元素應該相對位置是