只是想知道有没有人经历过。我找不到任何具体的答案。我正在尝试在具有背景的跨度上进行缓慢淡入淡出,并且出于某种奇怪的原因,在 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