Mon*_*der 10 javascript css browser html5 canvas
Firefox和Chrome中存在的问题是我有一个带有纯色背景的画布,以及一个带有纯色背景颜色/图像的div.div被限制在画布顶部.div不会显示在画布上.一个有趣的注意事项是,如果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>
Run Code Online (Sandbox Code Playgroud)
那么,有人有任何变通方法吗?或者我在HTML5规范中遗漏了哪些内容,说这是正确的?
请注意,请不要问我为什么要使用边距而不是固定/绝对/等等替代品.我需要利润.
Mos*_*ses 18
这只能通过应用样式来修复:
#d {position:relative;}
Run Code Online (Sandbox Code Playgroud)
要么
#d {position:absolute;}
Run Code Online (Sandbox Code Playgroud)