chrome 扩展中的弹出窗口显示不同的屏幕

Question

我正在制作 chrome 扩展，它有一个 popup.html 。看起来像这样：

<script type="text/javascript" src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popupstyle.css">
<div class="wrapper">
    <div class="timer">
    Time : 
        <input id="timerInput" type="text" placeholder="in milliseconds">
    </div>
    <div class="flex">
        <input type="button" class="flex-child" id="mystartbutton" value="Start">
        <input type="button" class="flex-child" id="mystopbutton"  value="Stop">
   </div>
</div>

popupstyle.css 是这样的：

.flex {
display: flex;
width: 50%;
float: right;
height: 20px;
overflow: hidden;
padding: 5px;
}
}

.flex-child {
-webkit-box-flex: 1 1 auto;
-moz-box-flex:  1 1 auto;
-webkit-flex:  1 1 auto;
-ms-flex:  1 1 auto;
flex:  1 1 auto;
margin-right:5px;
}
input[type=button] {
width: 30em;  height: 5em;
    margin-right: 5px;
}
.wrapper {
width: 500px;
border: 1px solid black;
overflow: hidden;
}
.timer {
width: 225px;
float: left;
height: 20px;
padding: 5px;
}

但在某些 chrome 浏览器中，它看起来像预期的那样：

但在某些情况下看起来像这样：

这种意外行为背后的原因是什么？

我想增加两个按钮的高度。

Answer 1

您的 CSS 错误：容器高度为 20px，按钮为 5em，大约高出 3 倍，因此按钮被剪裁并且它们的居中标签在边框下方不可见。

某些浏览器版本显然忽略了按钮的指定高度，这听起来像是一个错误。

要增加按钮的高度而不剪裁，您应该增加容器的高度：

.flex {
    height: 6em;
}

要让按钮填满整个高度：

input[type=button] {
    height: 100%;
}