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改为：

.foo

我将这个CSS添加到我的XHTML中。

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

由于我使用的是来自我的支持bean的值，我不得不在内部CSS表中添加所有CSS，所以你必须记住这一点，以防你使用bean的值（内联样式也是可能的）），如果没有，你可以以你想要的最佳方式使用CSS。

clip-path的替代方法：Internet Explorer 8中的inset（）

1 个答案: