DD Roundies не работает в IE, когда элемент имеет градиентный фильтр - PullRequest
Новая
       11

DD Roundies не работает в IE, когда элемент имеет градиентный фильтр

0 голосов
/ 22 марта 2011

Я использую округления DD для элемента списка (li), к которому также применен фильтр для градиента, и закругленные углы не отображаются, но если я уберу градиент, округлые углы появятся. Могу ли я что-то сделать, чтобы это исправить, или это известное ограничение для раундов? 

#hero-tabs li {
    display:block;
    float:left;
    width:279px;
    /*height:100px;*/
    font-size:11px;
    line-height: 1.3;
    color:#fff;
    border-left:1px solid #ccc;
    cursor:pointer;
    background-color:#555;

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
    background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}

DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');

Спасибо

Ответы [ 2 ]

0 голосов
/ 16 июля 2013

Это не ограничение для раундов, это ограничение для filter градиентов. Это подтверждается тем фактом, что filter градиенты также вызывают аналогичные проблемы в IE9 со стандартными border-radius углами.

Нет простого обходного пути; лучшее решение - просто не использовать эти filter градиенты в старых версиях IE; так что IE8 и более ранние версии будут просто резервным однотонным фоном.

В IE9 есть обходной путь, поскольку он может использовать изображение SVG с градиентом в качестве фона, встроенного в CSS, в качестве URL-адреса данных. Это немного неуклюже, но это работает. IE8 не имеет этой опции, хотя.

Если вам нужно использовать градиенты в IE8, вы в значительной степени вынуждены придерживаться стилей filter и жить с ошибками.

Существует еще одна опция - CSS3Pie . Это небольшая библиотека JS, похожая на DD_Roundies, в которой добавлена ​​поддержка border-radius для старых версий IE. Но кроме того, это также делает градиенты. Поэтому мой совет - использовать CSS3Pie вместо DD_Roundies, и он решит обе проблемы сразу.

Надеюсь, это поможет.

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

У меня это тоже есть, и, похоже, в настоящее время нет работы. Вы можете иметь одно или другое, но не оба.

IE применяет фильтр градиента к исходному элементу, чтобы округленные элементы из dd_roundies не покрывали его.

...