浏览器缩放导致怪异行为选择框

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>