zoukankan      html  css  js  c++  java
  • [转载]PIE的使用

    原文地址:PIE的使用作者:剑华一笑
        实际上是指的是一个名为pie的htc文件,即pie.htc,使用CSS的behavior行为,可以调用此文件,然后让IE也能实现一些常见的CSS3效果,如圆角(border-radius),盒阴影(box-shadow),背景渐变(gradient),多图片背景(multiple background images)。
        支持的主要CSS3属性:
        1.border-radius圆角
            CSS代码如下:
            .pie_radius{ 250px;height:250px;background-color:#34538b;-moz-border-radius:10px;      -webkit-border-radius:10px;border-radius:10px;behavior:url(pie.htc);}
            html代码如下:
            <div class="pie_radius"></div>
        2.box-shadow 盒阴影
            CSS代码如下:
            .pie_box_shadow{250px;height:250px;background-color:#34538b;-moz-box-shadow:1px 3px 3px #666;-webkit-box-shadow:1px 3px 3px #666;box-shadow:1px 3px 3px #666;behavior:url(pie.htc);}
            html代码如下:
            <div class="pie_box_shadow"></div>
        3.gradient渐变
             CSS代码如下:
            .pie_gradient{250px;height:250px;background-color:#9F9;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));background:-moz-linear-gradient(#9F9, #393);      -pie-background:linear-gradient(#9F9, #393);behavior:url(pie.htc);  }
            html代码如下:
            <div class="pie_gradient"></div>
        4.问题说明:
           a.IE下这些CSS3效果实现是借助于VML,由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就实现了覆盖,又避免了可能有其他元素正好插入其中。所以,问题来了,如果目前元素的position属性为static,也就是默认属性,则z-index属性是没有用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单,设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1)。
            b.IE浏览器的behavior 属性是相对于HTML文档而言的,与CSS其他的属性不一样,不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方变。如果绝对路径于根目录,则CSS文件不方便移动;如果相对路径与HTML文档,则pie.htc文件在不同HTML页面见的重用性大大降低。同时,诸如border-image后面的URL属性路径也不好处理。 
           c.使用PIE实现IE下的CSS3渲染(其他方法也是一样),只能使用缩写的形式,例如圆角效果,我们可以设置border-top-left-radius表示左上圆角,但是PIE确实不支持这种写法的,只能是老老实实的缩写。
            d. 要想让IE浏览器支持htc文件,需要一个有着”text/x-component” 字样的content-type 头部,否则,会忽视behavior。绝大数web服务器提供了正确的content-type,但是还有一部分则有问题。
            e.由于某种原因,您无法修改服务器配置(例如公用主机,或是空间服务商提供的服务器),您可以用一个PHP文件来间接调用htc文件。
                <?php  header( 'Content-type: text/x-component' );  include( 'pie.htc' );  ?>
            通过PHP文件来增加一个含有“text/x-component”字样的Content-type头,同时调用pie.htc文件。需要将pie.php和pie.htc放在同一个文件夹目录下,同时CSS中的behavior写法应该是:
                  behavior: url(pie.php);
  • 相关阅读:
    Compression algorithm (deflate)
    tcpip数据包编码解析(chunk and gzip)_space of Jialy_百度空间
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    gzip压缩算法: gzip 所使用压缩算法的基本原理
    Decompressing a GZip Stream with Zlib
    Frequently Asked Questions about zlib
    how to decompress gzip stream with zlib
    自己动手写web服务器四(web服务器是如何通过压缩数据,web服务器的gzip模块的实现)
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    C语言抓http gzip包并解压 失败 C/C++ ChinaUnix.net
  • 原文地址:https://www.cnblogs.com/Zhuangsd/p/5655366.html
Copyright © 2011-2022 走看看