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

时间:2015-09-20 10:40:11

标签: css google-chrome google-chrome-extension

我正在制作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浏览器中,它看起来很正常:

enter image description here

但有些看起来像这样:

enter image description here

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

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

1 个答案:

答案 0 :(得分:0)

您的CSS错误:容器高20px,按钮为5em,高出约3倍,因此按钮被剪裁,其中心标签在边框下方不可见。

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

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

.flex {
    height: 6em;
}

使按钮填满整个高度:

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