瀏覽器縮放導致怪異行爲選擇框

Question

我收到了關於瀏覽器縮放和我的選擇框的問題。我創建了一個自定義的選擇框與當前的HTML和CSS代碼（JSFIDDLE）：

.custom-select { 
 
    position: relative; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
.custom-select select { 
 
    width: 100%; 
 
    padding: 8px 5px 8px 10px; 
 
    height: 36px; 
 
    border: 1px solid #cacaca; 
 
    color: #0085c8; 
 
} 
 
.custom-select.svg > svg.dropdown-button { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 34px; 
 
    height: 34px; 
 
    background-color: #fff; 
 
    background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    pointer-events: none; 
 
    border: 1px solid #cacaca; 
 
    color: #0085c8; 
 
    display: inline-block; 
 
}

<div class="custom-select svg"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
    <svg class="dropdown-button"></svg> 
 
</div>

每當你的瀏覽器縮小到例如75％，我得到了以下情況：

POLO字被截斷的地方。我究竟做錯了什麼？這不應該放大敏感的權利？你可以將CSS樣式設置爲特定的縮放級別嗎？

--edit 增加寬度不是一種選擇，由於一個事實，即選擇是被放在一個div內與150px

Answer 1

您可以通過給汽車寬度定製嘗試的最大寬度選擇框。

.custom-select 
 
{ 
 
    position: relative; 
 
    width:100px; 
 
    display:inline-block; 
 
    overflow:hidden 
 
} 
 
.custom-select select{ 
 
\t width:auto; 
 
\t padding: 8px 5px 8px 10px; \t 
 
\t height:36px; 
 
\t border: 1px solid #cacaca; 
 
\t color: #0085c8; \t \t 
 
} 
 
.custom-select.svg > svg.dropdown-button 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 34px; 
 
    height: 34px; 
 
    background-color: #fff; 
 
    background-image: url(https://cdn0.iconfinder.com/data/icons/solid-line-essential-ui-icon-set/512/essential_set_down-16.png); 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    pointer-events: none; 
 
\t border: 1px solid #cacaca; 
 
\t color: #0085c8; 
 
\t display:inline-block; \t 
 
}

<div class="custom-select svg"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="Volkswagon Polo">Volkswagon Polo</option> 
 
    </select> 
 
    <svg class="dropdown-button"></svg> 
 
</div>