Html Internet Explorer上使用CSS过滤器渐变的CSS按钮渲染问题

由于某些原因，Internet Explorer中只显示按钮的上半部分。该按钮在Firefox、Chrome和Safari中呈现良好

我们使用“filter:progid:DXImageTransform”将CSS渐变应用于带有CSS的按钮

以下是网站：。（现在页面上只有一个按钮。）

有什么线索吗？

两件事：

1） 我建议尝试一下，它允许你使用梯度等，并将整理出你可能面临的许多问题

2） IE9不支持过滤器，因此如果您希望它在那里工作，您需要使用图像或SVG图像的datauri，如下所示：

background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%20%20%20%20%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22grad%22%20x1%3D%220%22%20y1%3D%2250%25%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff0000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Aurl%28%23grad%29%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A");

<?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="grad" x1="0" y1="50%" x2="0" y2="100%">
             <stop offset="0" stop-color="#ff0000" />
             <stop offset="1" stop-color="#000000" />
         </linearGradient>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" />
</svg>

这是通过URL编码svg实现的，如下所示：

background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%20%20%20%20%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22grad%22%20x1%3D%220%22%20y1%3D%2250%25%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff0000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Aurl%28%23grad%29%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A");

<?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="grad" x1="0" y1="50%" x2="0" y2="100%">
             <stop offset="0" stop-color="#ff0000" />
             <stop offset="1" stop-color="#000000" />
         </linearGradient>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" />
</svg>

这也有在歌剧院工作的优势

这意味着你要做的是普通的渐变，然后是过滤，覆盖现代浏览器，IE9，Opera和IE8等等

---

此时，您可能会决定编写一个脚本，为您生成一个毕业生的图像，如下所示：

谢谢，Rich。为什么MSFT要缩减过滤器支持？似乎需要SVG图像的图像或数据URI会使应用过滤器变得更加困难？在IE9中根本没有应用过滤器的纯CSS方法？IE9中删除了所有过滤器，因为它们不是任何标准的一部分。公平地说，梯度的东西也没有最终确定，所以我理解他们为什么没有包括它。我用SVG思想更新了我的答案。IE专有CSS过滤器的工作方式在IE8中发生了重大变化。您发现哪个版本的IE存在按钮被切断的问题？PS在IE9中看起来很好（如果IE9在标准模式下运行（当前在IE7模式下运行）），您可以删除此标签吗？还是你需要它<代码>