CSS慢速不透明度淡化仅在转换期间在FF中具有边框

时间:2013-05-30 18:26:35

标签: css firefox opacity fade

只是想知道是否有其他人经历过。我无法找到任何具体的答案。我试图在有背景的跨度上进行缓慢淡入淡出,出于某种奇怪的原因,在Firefox中,在过渡期间出现了边界(通常只有一个边),但它是转换结束后不存在。我是用纯CSS做的。

这里是CSS:

#lab_equip span {cursor:pointer;display:block;height:100%;position:absolute;top:0;background:url(images/lab_active.png) no-repeat;background-size:cover;opacity:0;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
#lb-listen{width:28.06415%;left:0;}
#lb-brainstorm{width:22.1077%;left:28.1%;background-position:35.9% 0% !important;}
#lb-develop{width:28.29324%;right:21.6%;background-position:69.6% 0% !important;}
#lb-212{width:21.53494%;right:0;background-position:99.8% 0% !important;}
#lab_equip span:hover{opacity:1;}

这是HTML:

<div id="lab_txt">
            <div rel="lb-default"><?php $a = new Area('Default Text'); $a->display($c); ?></div>
            <div rel="lb-listen"><?php $a = new Area('Listen Text'); $a->display($c); ?></div>
            <div rel="lb-brainstorm"><?php $a = new Area('Brainstorm Text'); $a->display($c); ?></div>
            <div rel="lb-develop"><?php $a = new Area('Develop Text'); $a->display($c); ?></div>
            <div rel="lb-212"><?php $a = new Area('212 Text'); $a->display($c); ?></div>
        </div>

只是好奇是否有其他人看到过这种情况。它在Chrome中运行良好。

感谢您的任何提示! :d

0 个答案:

没有答案