Html 为什么我的按钮在Chrome中溢出容器？_Html_Css_Google Chrome_Viewport Units

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

html css google-chrome

Html 为什么我的按钮在Chrome中溢出容器？,html,css,google-chrome,viewport-units,Html,Css,Google Chrome,Viewport Units,我已将div设置为size78vh。78/13=6对于每个按钮，我做了一个尺寸6vh，因此所有13个按钮都应该适合78vh。在Firefox中，一切看起来都很好，但在Google Chrome中，最后一个按钮的功能远远超出了这一范围。有人知道为什么吗？请注意，我不是一个HTML开发人员，所以一个简单的解释对我来说意义重大 <body> <div style="height:85vh;overflow:auto;background-color:green;margin-

我已将div设置为size

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>

删除

标记并添加“显示：块；”按钮样式。

删除

标记并添加“显示：块；”按钮样式。

这取决于按钮之间的

标记。至少在Chrome中，

标记似乎随着窗口高度的变化而逐步改变高度。这使得按钮的组合高度看起来要么太小，要么太高

解决此问题的一种方法是删除

标记，并将按钮的CSS显示属性设置为

块

这把小提琴显示了这两种方法之间的差异：。带有

标记的方法位于右侧。尝试更改结果窗格的高度，您将看到按钮之间的间距如何变化。