我有一些简单的HTML显示日历，如下所示。呈现后，日历相对于月中的天数和月的第一天是星期几，有5行或6行。每个day单元格都可以点击来执行一些javascript。这在所有桌面浏览器和iOS上都运行良好。然而，在所有版本的Android测试中，底部一行单元格在点击时不会触发onclick事件。什么好主意吗?
<div id="cal">
<div id="cal-caption">
<span id="cal-last"><img src="/assets/images/arrow-left.png"></span>
<span id="cal-month">May 2021</span>
<span id="cal-next"><img src="/assets/images/arrow-right.png"></span>
</div>
<div id="cal-header">
<div class="cal-head">MON</div>
<div class="cal-head">TUE</div>
<div class="cal-head">WED</div>
<div class="cal-head">THU</div>
<div class="cal-head">FRI</div>
<div class="cal-head">SAT</div>
<div class="cal-head">SUN</div>
</div>
<div id="cal-body">
<div class="cal-row">
<div id="cl00" onclick="cal.click('cl00')"></div>
<div id="cl01" onclick="cal.click('cl01')"></div>
<div id="cl02" onclick="cal.click('cl02')"></div>
<div id="cl03" onclick="cal.click('cl03')"></div>
<div id="cl04" onclick="cal.click('cl04')"></div>
<div id="cl05" onclick="cal.click('cl05')"></div>
<div id="cl06" onclick="cal.click('cl06')"></div>
</div>
<div class="cal-row">
<div id="cl10" onclick="cal.click('cl10')"></div>
<div id="cl11" onclick="cal.click('cl11')"></div>
<div id="cl12" onclick="cal.click('cl12')"></div>
<div id="cl13" onclick="cal.click('cl13')"></div>
<div id="cl14" onclick="cal.click('cl14')"></div>
<div id="cl15" onclick="cal.click('cl15')"></div>
<div id="cl16" onclick="cal.click('cl16')"></div>
</div>
<div class="cal-row">
<div id="cl20" onclick="cal.click('cl20')"></div>
<div id="cl21" onclick="cal.click('cl21')"></div>
<div id="cl22" onclick="cal.click('cl22')"></div>
<div id="cl23" onclick="cal.click('cl23')"></div>
<div id="cl24" onclick="cal.click('cl24')"></div>
<div id="cl25" onclick="cal.click('cl25')"></div>
<div id="cl26" onclick="cal.click('cl26')"></div>
</div>
<div class="cal-row">
<div id="cl30" onclick="cal.click('cl30')"></div>
<div id="cl31" onclick="cal.click('cl31')"></div>
<div id="cl32" onclick="cal.click('cl32')"></div>
<div id="cl33" onclick="cal.click('cl33')"></div>
<div id="cl34" onclick="cal.click('cl34')"></div>
<div id="cl35" onclick="cal.click('cl35')"></div>
<div id="cl36" onclick="cal.click('cl36')"></div>
</div>
<div class="cal-row">
<div id="cl40" onclick="cal.click('cl40')"></div>
<div id="cl41" onclick="cal.click('cl41')"></div>
<div id="cl42" onclick="cal.click('cl42')"></div>
<div id="cl43" onclick="cal.click('cl43')"></div>
<div id="cl44" onclick="cal.click('cl44')"></div>
<div id="cl45" onclick="cal.click('cl45')"></div>
<div id="cl46" onclick="cal.click('cl46')"></div>
</div>
<div id="cal-extra" class="cal-row">
<div id="cl50" onclick="cal.click('cl50')"></div>
<div id="cl51" onclick="cal.click('cl51')"></div>
<div id="cl52" onclick="cal.click('cl52')"></div>
<div id="cl53" onclick="cal.click('cl53')"></div>
<div id="cl54" onclick="cal.click('cl54')"></div>
<div id="cl55" onclick="cal.click('cl55')"></div>
<div id="cl56" onclick="cal.click('cl56')"></div>
</div>
</div>
<div id="cal-footer">
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
<div class="cal-foot"></div>
</div>
HTML是bootstrap响应式布局的一部分。这个问题只发生在Chrome浏览器中，当视窗很窄(手机大小)。日历位于左手6列，一些文本位于右手6列。随着页面级联和viewport变窄，右手6列下降到左手列以下，但关键是在Chrome中有一个重叠。重叠的部分模糊了日历的底部一行。为了解决这个问题，我在左侧列中添加了高z-index，在右侧列中添加了低z-index。所以现在重叠仍然发生，但日历在上面，仍然可以点击。非常感谢T.Trassoudaine为我指出了正确的方向。