在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%; 
}