webkit css resize不能用canvas作为孩子吗?

问题描述 投票:1回答:1

假设以下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可以调整大小?我该如何解决这个问题?

html css html5-canvas webkit
1个回答
1
投票

似乎画布正在采取鼠标事件阻止调整大小。如果你在画布上考虑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>
© www.soinside.com 2019 - 2024. All rights reserved.