: после обрезки псевдоэлемента при использовании фильтра в IE8

Question

Это HTML:

<div id="target"></div>

CSS:

#target {
    position: relative;
    width: 200px;
    height: 200px;
    background: #F00;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F00,endColorstr=#F00)";
}
#target:before {
    content: "content from before";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    background: cyan;
}

вот jsfiddle:
http://jsfiddle.net/8BzW6/

Если вызакомментируйте фильтр, тогда родительский элемент (#target) не обрезает элемент after.

Вы знаете, как это решить?

(мне нужен градиент, и я не хочу использовать изображение)

Answer 1

Использование фильтра Microsoft для меня - плохая практика, она всегда будет вызывать проблемы.И если вы объедините его с современной техникой, такой как CSS3, это станет еще хуже.

А как насчет использования встроенного 1-пиксельного градиентного изображения с использованием data64?

Вот генератор: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/