Solution for Star Rating not rendering correctly on IE

Your plugin is great, it offers free features that would otherwise be paid on other plugins. That’s why your plugin is a good choice, but since in my case, I still need to support IE11 I tried to make a workaround on the issue. The workaround is based on WordPress’s Star Rating on Add New Plugin Page. Instead of using SVG to mask on a background color to render the Star Rating, they used the font-family dashicons. The dashicons has characters \f155 for star-solid, \f459 for star-half and \f154 for star-regular. Using these characters I override your CSS to use these when rendering on IE.
Here is my code solution:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .strong-rating span.star::before {
        content: "\f155";
        font-family: dashicons, serif;
        text-align: center;
        background: transparent;
    }
    .strong-rating-wrapper.average .strong-rating span.star.half::before {
        content: "\f459";
    }
    .strong-rating span.current ~ span.star::before {
        content: "\f154";
    }

    .strong-rating label::before {
        content: "\f155";
        font-family: dashicons, serif;
        text-align: center;
        background: transparent;
    }
    .strong-rating-wrapper.in-metabox .strong-rating > label::before {
        background: transparent;
    }
    .strong-rating-wrapper.in-metabox input[type='radio']:checked + label::before {
        background: transparent;
    }
    .strong-rating input:checked ~ label::before {
        content: "\f154";
    }
    .strong-rating:hover input ~ label::before, .error .strong-rating:hover input ~ label::before {
        content: "\f155";
    }
    .strong-rating input[type='radio']:checked + label::before, .error .strong-rating input:checked + label::before {
        content: "\f155";
    }
    .strong-rating:hover input:checked + label::before, .error .strong-rating:hover input:checked + label::before {
        background: transparent;
    }
    .strong-rating:hover label:hover ~ input:not(:checked) + label:before {
        content: "\f154";
    }
}

• This topic was modified 4 years, 3 months ago by dmcpro.