iOS端CSS调整下拉菜单元素排序失效问题求助

不需要依赖服务端处理，以下是几种可靠的前端修复方案：

1. 强制将span转为块级flex子项 #

iOS Safari旧版本对行内元素（如span）作为flex子项的order属性支持存在bug，只需给子元素添加块级显示声明即可：

.parent {
    display: flex;
    flex-direction: column;
}
.child {
    display: block; /* 修复行内元素的flex排序问题 */
    order: 0;
}
.child.disabled {
    order: 1;
}

2. 替换为CSS Grid布局 #

如果Flexbox的order仍不生效，可以改用CSS Grid布局，它在iOS端的排序属性兼容性更稳定：

.parent {
    display: grid;
}
.child {
    order: 0;
}
.child.disabled {
    order: 1;
}

Grid布局默认会垂直排列子元素（无需额外设置方向），order属性的作用逻辑和Flexbox一致。

3. JavaScript手动调整DOM顺序 #

如果上述CSS方案都无法解决，可直接通过JS修改DOM结构来实现排序，完全规避浏览器兼容性问题：

const parentEl = document.querySelector('.parent');
// 把所有禁用状态的子元素移到父容器末尾
document.querySelectorAll('.child.disabled').forEach(item => {
    parentEl.appendChild(item);
});

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