Скругленные углы CSSPIE + CSS Gradient - PullRequest
Новая
       14

Скругленные углы CSSPIE + CSS Gradient

1 голос
/ 02 августа 2011

У нас есть проблема, из-за которой мы используем этот код ниже. Это просто базовое поле с закругленными углами и градиентом (и мы применяем CSSPie к нему). Мы заметили, что во всех IE мы не можем держать закругленные углы этого элемента в IE из-за градиента (круговая диаграмма не работает). Кто-нибудь сталкивался с решением для этого? Мы хотели бы полностью перенести наши градиенты из фотошопа в CSS, но это вызывает досадную проблему!

Спасибо !! 

    .superduper {
    position: relative;
    width: 100px;
    height: 100px;
-webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #ff0000 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    *background: #ff0000;
    background: #ff0000\0/;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF00ff00, endColorstr=#FFff0000);

    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#00ff00),
        to(#ff0000)
    );
    background-image: -webkit-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -moz-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: -o-linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
    background-image: linear-gradient(
        top,
        #00ff00,
        #ff0000
    );
}

Ответы [ 2 ]

2 голосов
/ 03 августа 2011

Это потому, что вы используете собственное свойство IE фильтра 'filter'. Из-за способа, которым IE отображает фильтры, он рисует весь блок элементов, который покрывает скругление углов.

Вам следует удалить свойство фильтра и указать свой линейный градиент в свойстве -pie-background. Это позволит PIE визуализировать градиент и соблюдать радиус границы.

Пример этого в действии см. На домашней странице css3pie.com (установите флажок «Показать CSS», чтобы увидеть сгенерированный код).

например. -pie-background: линейный градиент (top, # 00ff00, # ff0000);

0 голосов
/ 14 сентября 2011

Эта альтернатива является совершенно новой: https://github.com/bfintal/jQuery.IE9Gradius.js

Просто включите последний скрипт в тег head, и он должен обрабатывать все остальное.Смотрите примечания readme

...