Internet Explorer上使用CSS过滤器渐变的CSS按钮呈现问题 [英] CSS button rendering issue on Internet Explorer using CSS filter gradient

问题描述

由于某些原因，只有按钮的上半部分出现在Internet Explorer中。

For some reason, only the top half of a button appears in Internet Explorer. The button renders fine in Firefox, Chrome, and Safari.

我们使用filter：progid：DXImageTransform将CSS渐变应用到带有CSS的按钮。

We are using "filter:progid:DXImageTransform" to apply a CSS gradient to the button with CSS.

以下是网站： http://www.tekiki.com 。

任何线索？

推荐答案

几件事：

1）我建议您尝试 CSS3PIE ，它允许您使用渐变等，并将整理出您可能面临的许多问题。

1) I'd recommend trying out CSS3PIE, it allows you to use gradients etc and will have sorted out many issues that you might face.

2）IE9没有过滤器支持，所以如果你想要它在那里工作，你将需要使用图像或SVG图像的数据文件，如下：

2) IE9 doesn't have the filter support, so if you want it to work there you will need to use either an image, or a datauri of an SVG image like this:

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做的，看起来像这样：

That's made by urlencoding an svg that looks like this:

<?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工作的优点。

That has the advantage of working in Opera as well.

这意味着你会做普通的grad，然后，过滤器覆盖现代浏览器，IE9，Opera和IE8和下来。

This means you'd do the normal grad, then that, then the filter to cover modern browsers, IE9, Opera and IE8 and down.

这一点，你可以决定写一个脚本，为你生成一个grad的图像，像这样： http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/

At this point, you may decide to write a script that generates an image of a grad for you, like this one: http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/

这篇关于Internet Explorer上使用CSS过滤器渐变的CSS按钮呈现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！