时间戳

首页 > 解决方案 > 剪辑路径的替代方法：Internet Explorer 8 中的 inset()

html - 剪辑路径的替代方法：Internet Explorer 8 中的 inset()

问题描述

我正在使用 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 一起工作？

标签： htmlcss

解决方案

感谢@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);
}

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

推荐阅读