Градиент в Internet Explorer 9 переполняет скругленную границу - PullRequest
Новая
       2

Градиент в Internet Explorer 9 переполняет скругленную границу

4 голосов
/ 09 февраля 2012

У меня проблема с закругленными границами и градиентом в IE9.Градиент переполняет скругленную границу. 

.cn_item:hover, .selected{
    width:300px;
    border:1px solid #333333;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    height:49px;
    color:#333333;
    padding:5px;
    margin:6px 5px 0px 0px;
    text-shadow:1px 1px 1px #000;       
    background-image: -ms-linear-gradient(top, #DDDDDD 25%, #FF0000 5%);        
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#666666')";
    zoom: 1;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

Я уже использую overflow:hidden;, но ничего не работает.Есть предложения?

Ответы [ 2 ]

2 голосов
/ 09 февраля 2012

Это известная ошибка.Если вы выполняете поиск в стеке потока, есть несколько вопросов, подобных этому.
IE9: радиус границы и фоновый градиент кровотечения

Единственный способ обойти это без добавления дополнительной разметки - использовать svg.
Редактор градиентов Colorzilla должен облегчить задачу.

1 голос
/ 12 февраля 2013

Просто используйте div обертки (округленный и скрытый переполнение), чтобы обрезать радиус для IE9. Простой, работает кросс-браузер. Нет необходимости в SVG, PIE, JS или условных комментариях. 

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}
...