我正在制作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浏览器中,它看起来很正常:
但有些看起来像这样:
这种意外行为背后的原因是什么?
我想增加两个按钮的高度。
答案 0 :(得分:0)
您的CSS错误:容器高20px,按钮为5em,高出约3倍,因此按钮被剪裁,其中心标签在边框下方不可见。
某些浏览器版本显然忽略了按钮的指定高度,这听起来像是一个bug。
要增加按钮的高度而不剪裁,您应该增加容器的高度:
.flex {
height: 6em;
}
使按钮填满整个高度:
input[type=button] {
height: 100%;
}