Question

以下工作直到我升级到Firefox 18，现在它正在更改大部分页面，因此它具有黑色背景。如果我删除border-radius，overflow：hidden，或者button_body上的背景，它似乎可以解决问题。

调整浏览器大小似乎也会产生随机结果，如果我让窗口足够小，它会使窗口背景和浏览器背景本身透明，这样我就可以看到桌面了。

我做错了什么，或者我可以改为仍然保留我所有的CSS样式但是消除了这个问题？

<html>
<style>
    body, div, p, canvas {
        overflow: hidden;
    }
    #Main2 {
        left: 0;
        position: absolute;
        top: 0;
        z-index: 1;
        width:500px;
        height:300px;
    }
    #pDiv div.button_body {
        background: #396B9E;
    }
    #pDiv{
        position:absolute; 
        left: 100px; 
        top: 20px; 
        width: 136px; 
        height: 16px; 
        border-radius: 0.3em 0.3em 0.3em 0.3em;
        z-index:10;
    }             
</style>
<body>
<canvas  id="Main2">Upgrade your Browser!</canvas>
<div id="pDiv">
    <div class="button_body">
        test
    </div>
</div>
</body>
<script>
        var _o = document.getElementById('Main2').getContext('2d');
        _o.fillStyle = 'rgba(208, 208, 208, 1)';
        _o.fillRect (0, 8, 200, 200);      
</script>

这是一个示例页面。 http://crystalvalleycomputers.com/test/test.html

Answer 1

问题在于canvas fillStyle。

更正代码：

 _o.fillStyle = 'rgba(208, 208, 208, 1)';

Firefox 18奇怪的画布背景行为

1 个答案: