<select>标签不会停留在Firefox中的指定边框内

Question

我正在创建一个应用程序，要求我使用3＆lt; select＆gt;堆叠在一起的标签。我需要说标记彼此齐平，也不要跳过背景div的边界。我在Google Chrome中做得很好，但是当我查看Firefox时，一切都变得混乱。选择标签几乎以不可接受的方式超出了背景div的边界。 我问题的一个直观例子（左侧谷歌浏览器上的Firefox）... 这是我的HTML ... ＆lt; div id ='wr-main-wrap'＆gt;     ＆lt; div id ='wr-wrapper'＆gt;         ＆lt; div id ='wr-opaq-background'＆gt;＆lt; / div＆gt;         ＆lt; div id ='input-wrapper'＆gt;             ＆LT; DIV＆GT;                 ＆lt; h3 class ='label-text'＆gt;工作日长度：＆lt; / h3＆gt;                 ＆lt; select ng-model ='ratioControl.workday'＆gt;                     ＆lt; option value ='1'＆gt; 1小时＆lt; /选项＆gt;                 ＆LT; /选择＆GT;             ＆LT; / DIV＆GT;             ＆LT; DIV＆GT;                 ＆lt; h3 class ='label-text'＆gt;中断频率：＆lt; / h3＆gt;                 ＆lt; select ng-model ='ratioControl.breakspan'＆gt;                     ＆lt; option value ='。5'＆gt; 30分钟＆lt; / option＆gt;                 ＆LT; /选择＆GT;             ＆LT; / DIV＆GT;             ＆LT; DIV＆GT;                 ＆lt; h3 class ='label-text'＆gt;中断长度：＆lt; / h3＆gt;                 ＆lt; select ng-model ='ratioControl.breaklength'＆gt;                     ＆lt; option value ='5'＆gt; 5分钟＆lt; /选项＆gt;                 ＆LT; /选择＆GT;             ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;     ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; 这是我的CSS ... ＃WR-主缠绕{     宽度：19em;     保证金：0自动; } ＃WR-包装{     宽度：17em;     保证金：3.5em auto; } ＃WR-OPAQ背景{     位置：绝对;     宽度：17em;     身高：7em;     背景颜色：白色;     z-index：-1;     不透明度：.7;     border-radius：.25em; } ＃输入包装{     保证金：5em 0;     填充：.85em 0 0 .6em; } .label文本{     font-family：'Bebas Neue';     margin-bottom：.8em;     字间距：.1em;     display：inline-block; vertical-align：top;     宽度：9em; } 选择{     宽度：6em;     保证金：0 0 1.1em 0;     背景颜色：白色;     边框：黑色实心.1em; } 我已经检查了堆栈溢出和互联网相当多，并没有找到任何回答我的问题。我使用Angular是值得的，以防可能与它有关。

Answer 1

尝试以下CSS：

#wr-wrapper{
  position: relative;
}

Answer 2

<input>代码本身需要高度和宽度，否则，它们只会调整为浏览器的默认设置。这完全不可预测。我使用%作为度量单位。