css浏览器兼容.docVIP

css浏览器兼容 =======================display:inline-block兼容ie7，ie6================== div class=update 文字内容 div class=order span class=up title=排序1/span span class=down title=排序2/span /div /div .update{position:relative; display:inline-block; *zoom:1; *display:inline; *overflow:hidden; padding-right:25px;} .order{position:absolute; top:-2px; right:0;} 由于ff，ie8，chrome 支持inline-block，所以其形成一个内联块，并有一个右边的内边距，所以其子元素的绝对定位right：0；可以做到右边为0，即可相对于左边自适应。 而ie6，ie7不支持inline-block，所以其右边内边距不能用，需要将其设置为display:inline,变为内联元素，然后设置：zoom：1；触发layout,其显示效果为inline-block。 总计：ie6，ie7下display:inline; zoom:1;=====ff,ie8,chrome的inline-block ======================================火狐 chrome Safari 下边框的阴影===================================== -moz-box-shadow: 5px -5px 5px #b6ebf7; ///* for Mozilla Firefox */ -webkit-box-shadow: 5px -5px 5px #b6ebf7; ///* for Safari Google Chrome */ 需要注意的是，它有4个参数： 第一个参数：水平偏移的位置，它有正数或者负数。如果是正数的话，那么表示边框的右（right）边产生阴影；否则如果是负数的话，那么它的左边（left）框产生阴影效果。 第二个参数：垂直偏移的位置。它也有正数或者负数。如果是正数的话，那么表示下（bottom）边框有阴影；否则如果是负数的话，那么它的上（top）边框有阴影。 第三个参数：阴影的大小 第四个参数：颜色，这个很好理解。 有box shadow ，还有一个属性是text-shadow，这个主要是运用在文字上面的。 span style=text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;Welcome to my home!/span =====================================================透明度=============================================================== Firefox, Safari, Chrome和Opera下的CSS透明度 #myElement { opacity: .7; } IE下的CSS透明度 #myElement { filter: alpha(opacity=40); } IE8的CSS透明度的方法语法如 #myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* 第一行在IE6, IE7和IE8下有效 */ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /*第二行仅在IE8下有效 */ } Firefox和Safari旧版本所需的透明度设置： #myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } 是不是特别特别的坑爹啊！~~。 还好，我们现在生活在一个开始完美的时代，CSS 3出来之后，有了新的一个名词就是透明度（transparency）的属性。 代码如下： #box3 { background-color: rgba(110, 142, 185, .5); } 里面有4个参数，前3个参数特别好理解，就是rgb颜色的（别告诉我，还不知道什么叫rgb颜色值，不知道的拉出去打屁屁），最最重要的就是第四个