HTML下拉框点击后选项尺寸远大于初始选择框的问题求助

核心修复方案 #

• 给<option>单独设置字体大小，切断父容器超大字体的继承
• 将select的百分比高度改为固定值，避免特殊视口下的高度计算异常

修改后的完整代码 #

HTML（无需改动）

<div class="addSoundScreen">
    <label for="audioType">Choose Category</label>
    <select id="audioType">
        <option value="music">Music</option>
        <option value="ambiance">Ambiance</option>
        <option value="effects">Effects</option>
    </select>
</div>

CSS（关键修改处已标注）

.addSoundScreen {
    display: none;
    position: fixed;
    box-sizing: border-box;
    padding: 1%;
    background-color: rgba(0, 0, 0, 0.705);
    
    bottom: 20vh;
    left: 15vw;
    height: 70vh;
    width: 70vw;
    border-radius: 10%;
    
    flex-direction: column;
    align-items: center;

    font-size: 280%;
    text-align: center;
    color: aliceblue;
}

.addSoundScreen select {
    margin: 1%;
    width: 60%;
    /* 替换百分比高度为固定值，适配大字体显示 */
    height: 50px;
    font-size: 100%;
}

/* 新增：给option单独设置字体，避免继承父容器的超大字体 */
.addSoundScreen option {
    font-size: 16px; /* 可根据需求调整为合适大小 */
}

问题原因说明 #

你遇到的问题是因为父容器设置了font-size: 280%，<option>会默认继承这个超大字体；再加上select用了height: 5%的百分比高度，在1080x2400这种竖屏视口（尤其是打开开发者工具强制固定视口时），浏览器对下拉选项的尺寸计算出现偏差，最终导致选项溢出窗口。

内容的提问来源于stack exchange，提问作者Liam