为什么我的按钮会溢出 Chrome 中的容器？

Question

我已将 div 尺寸设置为 78vh。 78/13 = 6 对于每个按钮，我做了一个尺寸 6vh 所以所有 13 个都应该在 78vh 之内。在 Firefox 中，一切看起来都不错，但是在 Google Chrome 中，最后一个按钮超出了范围。有谁知道为什么？请注意我不是 HTML 开发人员，所以简单的解释对我来说意义重大。

<body>
    <div style="height:85vh;overflow:auto;background-color:green;margin-top:10vh;">
        <div style="height:78vh;margin:2vh;background-color:white;">
            <div class="visible-sm-block visible-md-block visible-lg-block" style="background-color:yellow;height:78vh;margin-right:66%;">
                    <button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>  
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
            </div>
        </div>
    </div>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>
</body>

Answer 1

删除   标签并为按钮添加 'display:block;' 样式。

Answer 2

这取决于按钮之间的   标签。看起来，至少在 Chrome 中，  标签随着 window 高度的变化而逐步改变高度。这会使按钮的组合高度看起来太小或太大。

解决此问题的一种方法是删除   标签并将按钮的 CSS 显示属性设置为 block。

此 Fiddle 显示了两种方法之间的区别：https://jsfiddle.net/0f5y1vj8/。带有   标签的方法在右边。尝试更改结果窗格的高度，您将看到按钮之间的间距如何变化。

为什么我的按钮会溢出 Chrome 中的容器？

Why does my button overflow the container in Chrome?

html

css

google-chrome

viewport-units