为什么:以前无法在野生动物园中看到?

问题描述

我有一个可以在Chrome浏览器中出色运行的代码:

I have a code which works brilliant in 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

I do not want to use such crazy code, but I have no other way 'cause I'm working with joomla 2.5

所以我的结果是...在Firefox中，不透明度转换无效.不，可以，但是以一种奇怪的方式...可以忍受.

So what I have as a result...In firefox doesn't work opacity transition. No, itworks, but in a strange way... Tolerably.

在Safari中:之前完全不会显示！

In Safari :before are not shown at all!

有此问题的网站(不是广告).

推荐答案

只需添加 position:absolute

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开发人员来说非常重要 box-sizing

very important for for 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 and :after are always position:absolute and the main element should be position relative

这篇关于为什么:以前无法在野生动物园中看到?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！