这是我的 html 文件。
<BODY>
<button id="b1" onclick="load()">Play</button>
<canvas id="c1" onclick="f_clicked(this.id,1)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c2" onclick="f_clicked(this.id,2)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c3" onclick="f_clicked(this.id,3)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
<canvas id="c4" onclick="f_clicked(this.id,4)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c5" onclick="f_clicked(this.id,5)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c6" onclick="f_clicked(this.id,6)">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
这是我的 css 文件
body{
background - color: gray;
}
button {
height: 40px;
width: 40px;
}
canvas {
width: 100px;
height: 100px;
border: 1px solid #000000; display:none; }
预期结果: 第一行中的前 3 个 Canvas 元素。 第二行接下来的 3 个 Canvas 元素。每个 Canvas 元素之间的间距为 20px。
在 Chrome 中: 我得到了第一行的预期结果。但是第二行元素之间存在折叠。 Firefox:我得到了两行的预期结果。
有谁知道为什么 chrome 的行为不同？？
最佳答案
删除
</br>
相反，将您的 2 组 Canvas 包裹在 div 中，因为它们是 display: block;另一组将被强制关闭，模拟你的 br 将要做什么，只是它没有
的空间量。
<body>
<div id="set-one">
<button id="b1" onclick="load()">Play</button>
<canvas id="c1" onclick="f_clicked(this.id,1)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c2" onclick="f_clicked(this.id,2)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c3" onclick="f_clicked(this.id,3)">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div id="set-two">
<canvas id="c4" onclick="f_clicked(this.id,4)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c5" onclick="f_clicked(this.id,5)">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="c6" onclick="f_clicked(this.id,6)">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
这样，您将拥有您想要/需要的 2 套 Canvas ，很可能没有空间。
关于html - Google Chrome 中的不同行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20756780/