为何Firefox无法正确调整含自定义letter-spacing的select标签尺寸？

给select设置letter-spacing后会出现浏览器兼容问题：Chromium内核浏览器会自动调整组件宽度以适配带间距的文本，但Firefox不会，导致部分内容被截断，且尝试width: max-content也无法解决。

解决方案一：用隐藏元素动态计算宽度（精准适配） #

通过创建一个与select样式完全一致的隐藏元素，实时同步选中的option文本，以此来计算并设置select的宽度，确保在Firefox中也能适配letter-spacing后的文本宽度。

完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>select input width with letter-spacing</title>
    <style>
    select {
        appearance: none;
        border: none;
        letter-spacing: 2px;
        box-sizing: border-box;
    }
    #width-calculator {
        visibility: hidden;
        white-space: nowrap;
        /* 确保和select的字体、间距完全一致 */
        font: inherit;
        letter-spacing: inherit;
    }
    </style>
</head>
<body>
    <select>
        <option>hello world</option>
        <option>longer text with more letters</option>
    </select>
    <span id="width-calculator"></span>

    <script>
    const select = document.querySelector('select');
    const calculator = document.getElementById('width-calculator');

    // 初始化宽度
    function updateSelectWidth() {
        calculator.textContent = select.value;
        select.style.width = `${calculator.offsetWidth}px`;
    }

    // 页面加载完成后设置初始宽度
    document.addEventListener('DOMContentLoaded', updateSelectWidth);

    // 监听选项变化，更新宽度
    select.addEventListener('change', updateSelectWidth);
    </script>
</body>
</html>

解决方案二：添加右侧内边距（快速兜底） #

如果对宽度精度要求不高，可直接给select添加右侧内边距，预留出letter-spacing带来的额外宽度。根据letter-spacing的数值调整内边距大小即可：

select {
    appearance: none;
    border: none;
    letter-spacing: 2px;
    padding-right: 1.5em; /* 可根据实际间距大小调整 */
}

问题原因 #

Firefox在计算select组件的固有宽度时，未将letter-spacing纳入计算范围；而Chromium内核浏览器会把字符间距算入宽度。同时Firefox对select的max-content宽度计算逻辑与普通元素不同，导致该属性无法生效。

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