由于某种原因，Internet Explorer 中仅显示按钮的上半部分。该按钮在 Firefox、Chrome 和 Safari 中呈现良好。
我们正在使用“filter:progid:DXImageTransform”将 CSS 渐变应用到带有 CSS 的按钮。
这里是网站：http://www.tekiki.com。 （目前页面上只有一个按钮。）
有什么线索吗？
【问题讨论】：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
标签： html css internet-explorer filter
几件事：
1) 我建议尝试CSS3PIE，它允许您使用渐变等，并且可以解决您可能面临的许多问题。
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");
这是通过对 svg 进行 urlencoding 制成的，如下所示：
<?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/
【讨论】：