我有一个在 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 中:之前根本不显示!
出现此问题的网站(不是广告)。
只需添加位置:绝对
a:before{
position:absolute;
content:"";
top: 0px;
left: 0px;
.....
并确保你的相对位置a
#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;
}
:before and :after总是位置:绝对主要元素应该是相对位置
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)