Question

假设以下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调整大小？我该如何解决呢？

Answer 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>

为了更好地说明，请稍微减小画布的大小，以避免与resize小部件重叠，它也可以工作：

#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>

webkit css resize不能与画布一起用作子级？

1 个答案: