使用CSS滤镜渐变的Internet Explorer上的CSS按钮呈现问题
出于某种原因，Internet Explorer中只出现按钮的上半部分。 该按钮在Firefox，Chrome和Safari中呈现良好。
我们使用“filter：progid：DXImageTransform”将CSS渐变应用于CSS按钮。
这里是网站：http://www.tekiki.com。 （现在页面上只有一个按钮。）
任何线索？
几件事情：
1）我建议尝试CSS3PIE，它允许您使用渐变等，并将解决您可能面临的许多问题。
2）IE9没有过滤器支持，所以如果你想要它在那里工作，你需要使用一个图像，或像这样的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");
这是由urlencoding一个svg，看起来像这样：
<?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>
这也有在Opera中工作的优势。
这意味着你会做普通的毕业生，然后，过滤器来覆盖现代浏览器，IE9，Opera和IE8等。
此时，您可能决定编写一个脚本，为您生成一份毕业生图像，如下所示：http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/
链接地址: http://www.djcxy.com/p/41995.html上一篇: CSS button rendering issue on Internet Explorer using CSS filter gradient