仅在Firefox中使用modal中的固定定位元素的问题

Question

请查看我的jsfiddle。

$('.approver-types').css("position", "fixed");

如果您在IE或Chrome中打开，则可以看到我正在尝试完成的任务。我正在尝试将左侧模态中的roles元素固定，以便在右侧滚动“用户”复选框列表时，角色不会移动。在Firefox中打开模态时，角色列表位置会混乱，直到您单击模态中的某些内容，此时它会自行更正。

提前感谢您的帮助。

Answer 1

在导航片中使用display:block代替display:table

此外，我添加了一个你在JS中缺少的逻辑。您指定在单击openFixed btn时应该应用固定位置，但是让JS猜测如何处理open btn。所以我添加了缺少的逻辑

$('#open').on('click', function () {
    open();
    $('.approver-types').css("position", "static");
});

查看更新后的fiddle和VIDEO以及