clip 用法和兼容性(转载)

CSS属性中有个裁剪属性clip，其实我对这个属性一点都不感冒，因为我感觉它好像没啥用处，但是前几天我同学问我这个属性是啥意思，我就是说裁剪的意思，后来他又问我更具体的我就不大知道了，于是我就研究一番，发现此属性的兼容性很有问题，下面详解一下。

clip 属性：

　　clip : auto | rect ( number number number number )

      参数：

      auto：对象无剪切

　　rect ( number number number number ) :

　　依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切

　　说明：

　　检索或设置对象的可视区域。区域外的部分是透明的。

　　必须将position的值设为absolute，此属性方可使用。

以上解释的很清楚吧，但是用来起你就会发现此属性并不那么听话。

比如 你要裁剪一个div，你这样写 clip:rect(0 100 1000)，大眼一看没什么错吧，在Dreamweaver里也正常，但是当你浏览的时候，才发现裁剪不管用，因为这个我研究了半个小时，终于发现：

在一个网页声明文档类型的情况下：

clip:rect(0px 100px 100px 0px)（空格单位）这种写法兼容所有浏览器（IE、Firefox、Chrome）

clip:rect(0px, 100px, 100px, 0px) (逗号空格单位) 这种写法只适用于Firefox

clip:rect(0px,100px,100px,0px) 
 (逗号单位) 这种写法不兼容任何浏览器

clip:rect(0,100,100,0)   (逗号)这种写法不兼容任何浏览器

clip剪切图片

clip:rect(0px 100px 100px 0px)

从上剪切0

从右剪切100

从下剪切100

从左剪切0

剪切：不要的