假设以下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>