Use CSS3 PIE to be compatible with IE introduce and lessons learned

Why 80% of the code can not do farming architect? >>>

Foreign team development compatible plug-in, when do the project last year found that very powerful
protagonist: PIE.js, PIE.htc two ways to achieve
the official website: http: //css3pie.com/

Demo Address: http: //css3pie.com/demos/gradient-patterns/

Important functions to achieve:

Can make IE6,7,8, 9 achieved similar chrome and firefox

1. Natural more realistic shadow effect, that no ugly previous filter effect.

2. To achieve a natural rounded corners

3. To achieve a powerful effect of CSS3 portion, such as multi background, border-image, a stronger background gradient.

4. png transparency Pictures

The first demo screenshot:

Very powerful Oh, now basically only use this plugin can handle a lot of compatibility issues.

Simply use the following under:

1. the .htc probably patch mode browser

css behavior used to load automatically achieve results,

#test {
    border-radius: 3px;
    behavior: url(/PIE.htc);
}

Note that path, it is best to use direct URL absolute path,

If you can not display probably does not support server-side parsing the file format type, you can be in the server configuration file

to increase at the end of a line mime.types file: text / x-component htc, under specific way please google it yourself

method summary my own earliest use of this method is, I found not working spirit, the very depressed for a long time, and have to write every place, super trouble, and finally gave up almost all the plug-ins, and later found a second method.

2. .js way that is flexible, simple

Download and unzip http://css3pie.com/download-latest

use PIE.js file

<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
PIE.attach(document.getElementById("test"));
</script>

Preferably on the bottom of the body, so after the html pages comprising either used

Also recommended is more convenient to use with jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/PIE.js"></script>
<script type="text/javascript">
(function($){
    $.pie = function(name, v){
        // 如果没有加载 PIE 则直接终止
        if (! PIE) return false;
        // 是否 jQuery 对象或者选择器名称
        var obj = typeof name == 'object' ? name : $(name);
        // 指定运行插件的 IE 浏览器版本
        var version = 9;
        // 未指定则默认使用 ie10 以下全兼容模式
        if (typeof v != 'number' && v < 9) {
            version = v;
        }
        // 可对指定的多个 jQuery 对象进行样式兼容
        if ($.browser.msie && obj.size() > 0) {
            if ($.browser.version*1 <= version*1) {
                obj.each(function(){
                    PIE.attach(this);
                });
            }
        }
    }
})(jQuery);
                                                                               
$(function(){
    $.pie('.for-ie6', 6);
                                                                               
    var objs = $('.for-ie, .test, .test1, .test2 .test3, #test4');
    $.pie(objs, 9);
});
</script>

Almost the first, so it, please refer to the specific code examples examiner online

Finally, talk about, in my experience,

1. rounded corners, when the shadows, it is best to define its style position: relative; otherwise, you may encounter inexplicable the story problem results in the generation of compatible layer style to see it;

2. when using a transparent png images as background, if no other rounded corners, shadows, style, seemingly under IE6 is not automatically achieve a transparent, you can try -pie -background: url (); or a way to add a border-radius: 0.5px; style can be achieved either transparent background

when under 3. IE6 transparent background image, try not to use css sprtes method is, will put a lot of pictures map otherwise, efficiency will be very poor in compatible rendering time, because it is too big picture, try to use a separate IE6 png picture transparent rendering

4. when using shadows, if you have set the gradient transparency may result in a black current solutions can try try using a semi-transparent png picture background try to do, I have not tested this, adjust the opacity filter looks like transparency is not successful, be The lack of it in the United States.

5. It should not be supported in the shadows, and did not get out too, to regret

------------------------------------------------------------------------------------------------------------------------------------------------------------

08.23 NOTE: transparent approach,

direct current compatible executed PIE container transparency is of no use, because JS will generate a new custom label laminate in the following, may be implemented by the following steps transparent

1. CSS Add

css3-container { filter:alpha(opacity=98); }

2. JS add

$('.test').prev('css3-container').css({'filter':'alpha(opacity=98)', 'opacity':0.98});

Reproduced in: https: //my.oschina.net/zhouz/blog/213196

Use CSS3 PIE to be compatible with IE introduce and lessons learned

Guess you like