我有一个函数采取一些不适用于Firefox的数据属性

Question

给你一些背景信息。 我有一张具有特定边框颜色的人的照片，当您点击该照片时，它会打开一个具有相同照片和相同边框颜色的新面板。它在Chrome上正常运行，但在Firefox上无法运行。

这是在Chrome上：

这是在Firefox上：

正如您所看到的，在Firefox上左侧有一个不同的边框颜色（黑色），这是我提到的新面板上的图片。

这是JS功能，它采用主画面的边框颜色并将其放在侧面板的图片上：

var showInfo = function (evt) {
    //console.log("---"+evt);
    evt.preventDefault();
    var id = this.parentNode.id;
    var info = APP.chart.getUser(id) || {};
    info['class'] = $(this).data('class');
    if($(this).parent().parent().hasClass('disabled') !== true){
        APP.sidebar.load(info);
    }
};

var circleColor = function () {
    $('[data-action="user-picture-chart"]').click(function(e) {
        $('[data-action="user-picture-sidebar"]').css('border-color', $(e.target).css('border-color'));
    });
};

var bindEventsToUI = function () {
    $('.js-user-info img').on('click', showInfo);
    $('.js-user-info strong').on('click', showInfo);
    circleColor();
};

这是主要图片的模板：

<img class="user__picture" data-action="user-picture-chart"
     src="assets/images/profile-picture/{{this.picture}}" />

这是左侧面板的模板：

<img class="user__picture" src="{%picture%}" data-action="user-picture-sidebar" />

.user__picture的默认css

&__picture {
    border: 4px solid #000;
}

这是屏幕截图中所选图片的默认颜色：

&--mngr {
    .user__picture {
        border-color: #bebebe;
    }
}

所以，正如您所看到的那样，那就是与该问题相关的整个代码，而这些代码并不适用于Firefox。

有什么建议吗？

Answer 1

你可以尝试在你的CSS中添加！important规则，我认为firefox正在读取你的默认css。

&--mngr {
    .user__picture {
        border-color: #bebebe!important;
    }
}

希望这有帮助！ ：）