CSS3 кнопки и IE9

Категория: / DEV Блог / CSS/Javascript
IE9, казалось бы, должен безусловно поддерживать CSS3, но увы - только частично.
К примеру, кнопку с градиентом и скругленными углами (border-radius) IE9 нарисует с бэкграундом,
выступающим за скругленные углы. Вместо того чтобы реализовать нормальную поддержку css, мелкософт сделал
поделку (внезапно - полезную), которая позволяет генерить градиенты в svg формате для использования в качестве
бэкграунда.

Пример кода кнопки (см. cssbuttongenerator.com):

.black_button {
    -moz-box-shadow:inset 0px 1px 0px 0px #a8a8a8;
    -webkit-box-shadow:inset 0px 1px 0px 0px #a8a8a8;
    box-shadow:inset 0px 1px 0px 0px #a8a8a8;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #807c80), color-stop(1, #0d0d0d) );
    background:-moz-linear-gradient( center top, #807c80 5%, #0d0d0d 100% );
   
    /*fuck IE*/    
    f1ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#807c80', endColorstr='#0d0d0d');
 
    background-color:#807c80;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #000000;
    display:inline-block;
    color:#ffffff;
    font-size:12px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #0d000d;
   
    /*generated on  microsoft.com*/
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNl
cnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3ODciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+
CjxzdG9wIHN0b3AtY29sb3I9IiM4MjdFODIiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1MjUyNTIiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzBEMEQwRCIgb2Zmc2V0PSIxIi8+
CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc4NykiIC8+Cjwvc3ZnPg==);
   
}.black_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0d0d0d), color-stop(1, #807c80) );
    background:-moz-linear-gradient( center top, #0d0d0d 5%, #807c80 100% );
 
    /*fuck IE*/
    f1ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d0d', endColorstr='#807c80');
   
   background-color:#0d0d0d;
}.black_button:active {
    position:relative;
    top:1px;
}


Сервис создает код с поддержкой фильтров градиента IE (filter:blabla), который собственно и факапит кнопку, вылезая за скругленные углы.

Решением для IE является добавления background-image с SVG градиентом и отказа от использования filter.




Знаете ли вы?
Для последнего IE существует набор хаков PIE (привет от всемогущего IE6), который фиксит поддержку CSS3 ослом и добавляет новых плюшек.
Работает при добавлении в CSS объявление класса `behavior: url(path/to/pie_files/PIE.htc);`.


Полезные ссылки:

Генератор SVG градиентов
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Генератор CSS градиентов
http://www.colorzilla.com/gradient-editor/

Генератор CSS3 кнопок
http://www.cssbuttongenerator.com/

PIE for IE
http://css3pie.com/download/