CSS 使用总结.docVIP

CSS使用总结 CSS常用 去火狐IE链接点击虚线 a{ text-decoration:none;outline: none; /* firefox */ hide-focus: expression(this.hideFocus = true); /* ie */} 英文或数字自动换行 1)英文或汉字自动换行 style=word-wrap:break-word ;width:630px; 2)汉字一行显示，不换行 word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */ FILTER: alpha(opacity=75); opacity: 0.75 层中图片自动缩放 img{max-width:500px;width:expression(this.width500?500px:this.width+px); } 5. .content-width {MARGIN: auto;WIDTH: 600px;} .content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width 600 ? 600px : this.width)!important;} 6．DIV中图片垂直居中 .bix{border:1px solid #f00;width:300px;height:300px;text-align:center;vertical-align:middle;display:table-cell;*font-size:270px;*font-family:Arial;} .bix img{vertical-align:middle;} CSS各浏览器区分规则 单独区分规则 可被FireFox和IE7识别：!important 例：margin:0px!important; 可被IE6、IE7识别： * 例：*margin:0px; 可被IE6识别： _ 例：_margin:0px; 可被IE7识别： *+ 例：*+margin:0px; 可被IE8识别： \9 例：margin:0px\9; 可被Safari识别： 例： .box{margin:0px;} @media screen and (-webkit-min-device-pixel-ratio:0) { .box{margin:10px;} /* Safari rules here */ } 可被 火狐 识别： @-moz-document url-prefix() { .box{margin:10px;} } 混写实例 区别IE6 与FF background: yellow ; *background: blue ; 【FF：黄色 IE6：蓝色】 区别IE6与IE7 background: yellow!important; background: blue ; 【IE7：黄色 IE6：蓝色】 区别IE7 与FF background: yellow ; *background: blue; 【FF：黄色 IE7：蓝色】 区别FF ，IE7 ，IE6 background: yellow ; * background: green !important ; * background: blue ; 【FF：黄色 IE7：绿色IE6：蓝色】 5) 还可以这样来区别FF ，IE7 ，IE6 background:yellow ; *background: green ; _background: blue ; 【FF：黄色 IE7：绿色 IE6：蓝色】 6） 区别FF ，IE8 ，IE7 ，IE6 ，Safari background: yellow ; background: red \9; *background: green ; _background: blue ; @media screen and (-webkit-min-device-pixel-ratio:0) { . background: black ; /* Safari rules here */ } 【FF：黄色 IE8：红色 IE7：绿色 IE6：蓝色 Safari：黑色】 .clearfix{zoom:1;} .clearfix:after{content:.;display:block;visibility:hidd