CSS慢速不透明度渐变在过渡期间仅在FF中具有边框

只是想知道是否还有其他人经历过。我找不到任何具体的答案。我试着在有背景的跨度上做一个缓慢的淡入淡出，出于一些奇怪的原因，在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>

只是好奇是否有其他人看到了这种情况。它在铬合金中工作良好

---

谢谢你的提示！：D

你能拼凑出一个简单的吗？嘿，漂泊！我试着在这里做：但它没有阅读动态部分：（我不小心在上面粘贴了错误的HTML。）。