<select>標籤不在Firefox的指定邊界內

我正在創建一個應用程序，需要我使用3個<select>標籤堆疊在一起。我需要所說的標籤互相齊平，也不會跳過背景div的邊界。我在Google Chrome中做得很好，但是當我檢查出它時Firefox，一切都變得不合時宜。選擇標籤幾乎以不可接受的方式超過背景div的邊界。<select>標籤不在Firefox的指定邊界內

我的問題（火狐左谷歌瀏覽器上右）的視覺例子...

這是我的HTML ...

<div id='wr-main-wrap'> 
    <div id='wr-wrapper'> 
     <div id='wr-opaq-background'></div> 
     <div id='input-wrapper'> 
      <div> 
       <h3 class='label-text'>work day length:</h3> 
       <select ng-model='ratioControl.workday'> 
        <option value='1'>1 Hour</option> 
       </select> 
      </div> 
      <div> 
       <h3 class='label-text'>break frequency:</h3> 
       <select ng-model='ratioControl.breakspan'> 
        <option value='.5'>30 Minutes</option> 
       </select> 
      </div> 
      <div> 
       <h3 class='label-text'>break lengths:</h3> 
       <select ng-model='ratioControl.breaklength'> 
        <option value='5'>5 Minutes</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div>

這是我的CSS ...

#wr-main-wrap{ 
    width: 19em; 
    margin: 0 auto; 
} 

#wr-wrapper{ 
    width: 17em; 
    margin: 3.5em auto; 
} 

#wr-opaq-background{ 
    position: absolute; 
    width: 17em; 
    height: 7em; 
    background-color: white; 
    z-index: -1; 
    opacity: .7; 
    border-radius: .25em; 
} 

#input-wrapper{ 
    margin: 5em 0; 
    padding: .85em 0 0 .6em; 
} 

.label-text{ 
    font-family: 'Bebas Neue'; 
    margin-bottom: .8em; 
    word-spacing: .1em; 
    display: inline-block;vertical-align: top; 
    width: 9em; 
} 

select{ 
    width: 6em; 
    margin: 0 0 1.1em 0; 
    background-color: white; 
    border: black solid .1em; 
}

我檢查堆棧溢出和互聯網相當多，並沒有找到任何回答我的問題。這是值得的，我使用角萬一可能與它有關。

來源

2016-03-04 Erik Åsland

試試下面的CSS：

#wr-wrapper{ 
    position: relative; 
}

來源

2016-03-04 03:58:02

對不起，我的朋友。沒有工作..：/ –

我認爲這與定位有關。但現在我看到了這張照片，這個問題似乎與寬度有關。試試像「90px」或「45％」或「0.4vw」這樣的單位。 –

當我這樣做時，它在兩個瀏覽器上仍然不同。 –

的<input>標籤本身所需的高度和寬度，否則，他們只會調整到瀏覽器的默認設置。這完全是不可預測的。我使用%作爲度量單位。

來源

2016-03-07 17:56:32

<select>標籤不在Firefox的指定邊界內

回答

相關問題