Firefox不透明问题：如果容器不透明度<1.0

在Chrome或Safari中不会发生这种情况，文字会变得很奇怪，并会出现彩色轮廓。在IE8中有点显着，但非常轻微（和灰色）。我在两台显示器上看到的轮廓都是绿色的。我不知道这是我的图形卡的问题，还是Firefox在不同的透明度下渲染字体的问题。Firefox不透明问题：如果容器不透明度<1.0

这种情况是否静态设置CSS，不使用jQuery fadeTo()效果。

以下测试页显示问题。将鼠标从左上角移到右下角以更改不透明度。最终你会达到1.0的不透明度，此时一切都很好。任何想法，为什么这可能是？

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> 
     Text Opacity Test 
     </title> 
     <style type="text/css"> 
      body { 
       background-color: #ddd; 
      } 
      div#textDiv { 
       position: absolute; 
       left: 0; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       padding: 20px; 
       font-size: 400%; 
       color: white; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(document).bind('mousemove',function(e){ 
        var hOpacity = (e.pageX/Math.round($('#textDiv').width())/2); 
        var vOpacity = (e.pageY/Math.round($('#textDiv').height())/2); 
        var opacity = vOpacity + hOpacity; 
        opacity = (opacity > 1) ? 1.0 : (opacity < 0) ? 0 : opacity; 
        $("#textDiv").text('Opacity: ' + opacity.toFixed(2)); 
        $('#textDiv').fadeTo(0, opacity); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="textDiv"></div> 
    </body> 
    </html>

来源

2010-10-27 Robusto

这里没有问题，Firefox 3.6.3/Mac OS X 10.4.11 – drudge 2010-10-27 20:16:46

由于未完全优化亚像素抗锯齿，我注意到我的角色周围有*非常*轻微的边框; FF 3.6.11/Linux。你使用哪种操作系统？ – 2010-10-27 20:20:30

@jncpl＆@Marcel Korpel：此框运行Windows 7.感谢您的测试。 – Robusto 2010-10-27 20:23:18

事实上，FF中的文本和不透明度存在问题。您只需要为要更改不透明度的元素设置背景颜色。

如果你不能（如：文字上的各种背景）嗯......你拧：d

说不上来，如果它的工作，但你可以设置background-color: rgba(0,0,0,0)，也许你是幸运的。

来源

2010-10-27 20:29:10

布拉沃。在'＃textDiv'上设置背景色可以解决问题。谢谢。但是你是对的，这在我无法在容器上使用背景色的情况下会出现问题。 – Robusto 2010-10-27 20:35:32

感谢这个Ionut。这个问题也帮助我！ – Cheeky 2011-03-21 11:40:02

Firefox不透明问题：如果容器不透明度<1.0

回答

相关问题