Firefox 和 Chrome 都存在的问题是,我有一个纯色背景的 Canvas ,以及一个纯色背景/图像的 div。 div 在 Canvas 顶部留有边距。 div 不显示在 Canvas 上。一个有趣的注意事项是,如果 div 中有文本,它将正确显示。这意味着它是一个浏览器错误......在两种浏览器中。这是一些供想要尝试的人使用的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#d{background-color:#111;margin-top:-150px;z-index:999999;}
</style>
<script type="text/javascript">
function load() {
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgba(255, 200, 200, 1)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
</html>
那么,有人有任何解决方法吗?还是我在 HTML5 规范中遗漏了一些说明这是正确的内容?
请注意,请不要问我为什么要使用边距而不是固定/绝对/等等...替代品。我需要边距。
这只能通过应用样式来解决:
#d {position:relative;}
或
#d {position:absolute;}
我是一名优秀的程序员,十分优秀!