html - 剪辑路径 : inset() in 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)} 是我从我的 bean 中获得的数字，我用来剪辑背景。

如您所见，我使用 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);
}

因为我使用的是来 self 的支持 bean 的值，所以我必须将所有 CSS 添加到内部 CSS 表中，所以你必须记住这一点，以防你使用来自 bean 的值(内联样式也是可能的) )，如果没有，您可以以您想要的最佳方式使用 CSS。