ChromeOS下Chrome语言菜单阿拉伯选项存在异常内边距

针对仅在ChromeOS系统Chrome浏览器中出现的阿拉伯语选项未选中时内边距异常问题，可尝试以下几种修复方案：

1. 强制统一文本方向与对齐 #

给语言选项的文本元素添加明确的方向控制，避免浏览器根据文本内容自动调整布局：

.options-item p {
    margin: 0;
    padding: 0;
    width: 256px;
    direction: var(--dir, ltr);
    text-align: var(--align, left);
}

html.text-rtl .options-item p {
    --dir: rtl;
    --align: right;
}

2. 替换Flex对齐规则 #

原代码使用justify-content: space-between可能在ChromeOS的RTL场景下计算异常，改用固定间距+自动margin的方式：

.options-item {
    width: 284px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 8px; /* 固定图标与文本的间距 */
    border-radius: 10px;
    margin: 3px 0;
    font-size: 21px;
}

html:not(.text-rtl) .options-item p {
    margin-left: auto; /* 文本靠右对齐 */
}

html.text-rtl .options-item p {
    margin-right: auto; /* 文本靠左对齐 */
}

3. 重置ChromeOS特定用户代理样式 #

ChromeOS的Chrome可能对RTL元素有额外默认样式，添加重置规则：

.options-item {
    box-sizing: border-box; /* 确保内边距计入宽度 */
    padding-left: 8px !important;
    padding-right: 8px !important;
}

4. 确保选中/未选中状态样式一致 #

检查options-item-selected类是否存在布局差异，强制对齐：

.options-item-selected {
    width: 284px;
    padding: 8px;
    /* 仅保留视觉区分样式，比如背景色，其余布局属性与未选中状态一致 */
}

问题详情 #

语言菜单中的阿拉伯选项仅在未选中时存在异常内边距，该问题仅发生在ChromeOS系统的Chrome浏览器中，Windows Chrome、IE及Safari均无此问题。已尝试调整CSS、JavaScript及字体，问题仍未解决，目标是让阿拉伯选项与中日韩等选项内边距保持一致。

相关代码 #

语言菜单生成JS代码

// Stack Overflow Version (CC License)
// While I cannot prevent you from doing so,
// Please do not use this to impersonate me or steal my website design


setTimeout(function () {
    var wb = document.querySelector('.options-language');
    var click = document.querySelector('.website-options-language');
    var le = Languages.Current();
    var auto_div = document.createElement('div');
    var kk = document.createElement('p');
    var zi = document.createElement('img');
    zi.src = '...';
    auto_div.appendChild(zi);
    wb.appendChild(auto_div);
    auto_div.appendChild(kk);
    // IRRELEVANT: automatic language detection removed
    // along with a horizontal line that was added for UI effect
    // This is where all the languages are stored
    window.Languages.All().forEach(function (lang) {
        var div = document.createElement('div');
        div.className = 'options-item';
        var i = document.createElement('img');
        i.src = lang.flag;
        div.appendChild(i);
        var k = document.createElement('p');
        k.innerText = lang.name;
        if(le === lang.id) {
            div.className = 'options-item options-item-selected';
        }
        div.appendChild(k);
        wb.appendChild(div);
        div.onclick = function () {
            if(le !== lang.id || Languages.IsAuto()) {
                Languages.SetLang(lang.id);
            }
        }
    });
    // controls hiding and showing of language menu
    // uses display: none (nothing could affect text)
    // I do not believe this is relevant
},10)

相关CSS代码

.options {
    top: 54px;
    position: fixed;
    width: 300px;
    height: fit-content;
    max-height: calc(100vh - 54px - 16px - 8px);
    padding: 8px;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.679);
    color: black;
}

.options-category {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px;
    font-size: 17px;
}

.options-item img {
    width: 24px;
    height: 24px;
}

.options-item p {
    margin: 0px;
    padding: 0px;
    width: 256px;
}

.options-item-link {
    text-decoration: none;
    color: black;
}

.options-item {
    width: 284px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    margin-bottom: 3px;
    margin-top: 3px;
    font-size: 21px;
}


html:not(.text-rtl) .options-item {
    flex-direction: row;
}

html.text-rtl .options-item {
    flex-direction: row-reverse;
}

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