假设以下 html 和 css 代码片段：
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: 100%;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
我希望 div 可以调整大小，在 Firefox 中确实如此。然而，在基于 webkit 的浏览器（例如 Chrome 和 Opera）中，情况并非如此。但是，如果我用 div 替换内部画布，它也可以在那里工作。所以我的问题是：为什么在这种情况下 canvas 元素会阻止外部 div 调整大小？我该如何解决这个问题？
画布似乎正在接受鼠标事件，从而阻止调整大小。如果你考虑pointer-events:none在画布上它将起作用：
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: 100%;
pointer-events:none
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
为了更好地说明，稍微减小画布的大小以避免与调整大小小部件重叠，它也将起作用：
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
}
#inner {
width: 100%;
height: calc(100% - 10px);
background:red;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
你还可以玩z-index:
#outer {
width: 100px;
height: 100px;
overflow: hidden;
resize: both;
border: 1px solid black;
position:relative;
z-index:0; /* mandatory to create a stacking context and keep the canvas inside */
}
#inner {
width: 100%;
height: 100%;
position:relative;
z-index:-1;
background:red;
}
<div id="outer">
<canvas id="inner"></canvas>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
