4

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では不透明度の移行が機能しません。いいえ、うまくいきますが、奇妙な方法で... 許容範囲内です。

Safari では :before はまったく表示されません!

この問題のある Web サイト(広告ではない)。

4

2 に答える 2

3

http://caniuse.com/#feat=css-gencontentをチェックして、「既知の問題」タブをチェックしてください。Safari ブラウザーは、疑似要素の遷移をサポートしていませんでした。私は昨日同じ問題に直面しています。

于 2013-08-01T09:38:42.467 に答える
3

position:absoluteを追加するだけです

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 dev box-sizingにとって非常に重要 

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

:beforeと:afterは常にposition:absoluteであり、メイン要素は位置相対でなければなりません

于 2013-08-01T10:07:17.457 に答える