按钮奇怪地不可点击答案

【问题标题】：Button weirdly not clickable按钮奇怪地不可点击
【发布时间】：2019-11-15 06:10:06
【问题描述】：

我正在尝试构建一个网络应用程序，但遇到了问题。

大多数应用程序的界面都包含许多按钮，我遇到了一个奇怪的现象，即我无法单击某些按钮（没有单击动画并且 onclick() 不运行）。

我注意到在多个按钮相互堆叠的情况下，只有最后一行按钮是可点击的。

我创建了一个最小、完整且可验证的示例。

<html>
<body>
    <div style="padding-top: 20%;" id="div1">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>
    <script>
        document.getElementById("div1").style.display = "initial";
    </script>
</body>
</html>

进一步的观察/注释：

当您从开发者菜单中选择一个元素时，您无法选择出现故障的按钮。

我正在使用火狐。我在 Chrome 中的应用遇到了类似的问题，但行为不端的按钮与 Firefox 中的按钮不同。

我试图通过分别设置display: none; 和display: initial; 来隐藏和显示各种<div> 元素（不同的屏幕）来创建单页网络应用程序。这就是<script> 的原因。我应该这样做有更好的方法吗？

【问题讨论】：

这是因为添加了initial 样式。有这样的理由吗？
是的，@ComputerLocus 是对的。这种行为是因为样式。
这是因为显示inline（initial 将默认为inline 用于显示属性）结合顶部填充。
@KoshVery 初始设置显示为内联而不是默认浏览器
@KoshVery 它没有设置为浏览器/元素默认值，而是设置为显示属性内联的规范默认值。

标签： javascript html css htmlbutton

【解决方案1】：

display: initial; 在您的情况下等同于 display: inline;。

然后将padding-top 应用于每一行内容，使第二行覆盖第一行。是否为包含的 div 添加背景会更容易查看。

#div1 {
	padding-top: 15px;
	display: initial;
	background: #f00;
}

<div id="div1">
	<button>
		Button 1
	</button>
	<br>
	<button>
		Button 2
	</button>
</div>

【讨论】：

它与盒子装饰没有真正的关系，而是因为 linebox 的高度仅由 line-height 定义，其他所有内容（填充、边框、边距等）都会简单地溢出
我认为填充应用于整个<div> 元素。我如何让它以这种方式工作？
@TemaniAfif 是的，我的错，我会删除那部分答案。
@IssaChanzi 除inline (initial) 以外的任何显示
@IssaChanzi 有几种方法，最简单的方法是改用display: inline-block;。

【解决方案2】：

<html>
<body>
    <div style="padding-top: 20%;">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>

</body>
</html>

【讨论】：