使用CSS過濾器漸變的Internet Explorer上的CSS按鈕呈現問題

Question

由於某種原因，只有Internet Explorer的上半部分出現按鈕。該按鈕在Firefox，Chrome和Safari中呈現良好。

我們使用「filter：progid：DXImageTransform」將CSS漸變應用於帶有CSS的按鈕。

這裏是網站：http://www.tekiki.com。 （現在頁面上只有一個按鈕。）

任何線索？

Answer 1

幾件事情：

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"); 

這由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/