:IE8

2011-12-09 2 views
3

でフィルタを使用するときにpseudoelementがトリミングされた後、これはHTMLです::IE8

<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/

あなたがコメントした場合フィルタを適用すると、 "after"要素は親要素(#target)でトリミングされません。

これを解決する方法をご存知ですか?私のために、Microsoftのフィルタを使用して

(私は、勾配を必要と私はイメージを使用したくない)

答えて

0

が悪い慣習である、それは常に問題が発生します。そして、それをCSS3のような最新の技術と組み合わせれば、さらに悪化します。

data64を使用してインライン1px勾配画像を使用するとどうなりますか?

ここに発電機があります。http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/