画布后孩子的位置是chrome和safari之间的区别

Question

<div>
 <canvas id="myCanvas" width="679" height="679" style="border:1px solid #000000;">
 </canvas>
 <input type="text">
</div>

当我使用 chrome 时，输入框在画布的顶部。 但是当我使用safari时，输入框在canvas下面，看起来很丑。

我想在画布上添加一个输入框。那么我该如何为 Safari 修复它呢？

Answer 1

只需用block 元素包装它们：

https://jsfiddle.net/5e8vj3k4/

<div>
  <div>
   <input type="text">
 </div>
 <div>
  <canvas id="myCanvas" width="679" height="679" style="border:1px solid #000000;"></canvas>
 </div>
</div>