Проблема отрисовки кнопок 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-изображения, например:

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/