Альтернатива пути клипа: inset () в Internet Explorer 8

Question

Я подаю заявку с JSF и Primefaces, у меня проблема с одним из моих HTML-элементов.

Это код.

<div style='background-repeat: repeat-x;background- 
image:url("/ASQ/resources/img/xxx_grey.png");width:300px;height:75px;' > 
</div>

<div style='background-repeat: repeat-x;background- 
image:url("/ASQ/resources/img/xxx_green.png");margin- 
top:-75px;width:300px;height:75px; clip-path:inset(0px #{300 - 
((((pollData.generalSat * 100)/5) * 300)/100)}px 0px 0px);'></div>

#{300 - ((((pollData.generalSat * 100)/5) * 300)/100)} - это число, которое я получаю из своего боба и которое я использую для обрезки фона.

Как видите, я использую clip-path: inset (), и мое приложение должно работать с Internet Explorer 8, поэтому clip-path не работает, я искал и не нашел ничего о IE8, только о более новые версии и вся найденная информация говорят использовать SVG вместо этого, но это не поддерживается и в IE8. В настоящее время он отлично работает с Chrome и Firefox.

Итак, есть ли способ заставить это работать с IE 8?

Answer 1

Благодаря ответу @ G-Cyr я пришел с решением, которое прекрасно работает.

Я изменил mi HTML на следующее:

<div class="sat-gen">
    <div class="sat-gen2"></div>
</div>

И я добавил этот CSS в свой XHTML.

.sat-gen{
    background-repeat: repeat-x;
    background-image:url("/ASQ/resources/img/xxx_grey.png");
    width:300px;
    height:75px;
}

.sat-gen > .sat-gen2{
    background-repeat: repeat-x;
    background-image:url("/ASQ/resources/img/xxx_green.png");
    width:300px;
    height:75px;
    position:absolute;
    clip: rect(0px #{((((datosEncuesta.valoracionSatisfaccionGeneral * 100)/5) * 300)/100)}px 75px 0px);
}

Поскольку я использую значение из своего базового компонента, мне пришлось добавить весь CSS во внутреннюю таблицу CSS, поэтому вы должны помнить об этом на случай, если вы используете значение изbean (встроенный стиль также возможен), если нет, вы можете использовать CSS наилучшим образом.