页面代码片段mark

collector_1

/**
* 1. 清除浮动
* 2. 固定Footer在页面底部的跨浏览器解决方案（2种方法实现）
* 3. css透明度opacity
* 4. @font-face语法 
* 5. 浏览器hack
* 6. PNG32透明(IE6)
* 7. 让IE9以下的版本支持HTML5
* 8. 文本溢出省略
* 9. 线性渐变（兼容）
* 10.多列排列（html5）
* 11.Google Font API
* 12.text/image旋转（兼容）
* 13.webkit内核下拉条样式设置
*/

1.清除浮动

  .clearfix:before,
  .clearfix:after {
  	visibility:hidden;
  	display:block;
  	font-size:0;
  	content:" ";
  	clear:both;
  	height:0;
  }
  .clearfix {
  	zoom:1; /* for IE6 IE7 */
  }
  
2.固定Footer在页面底部的跨浏览器解决方案
    /*
  Sticky Footer Solution
  by Steve Hatcher 
  
  http://stever.ca
  
  http://www.cssstickyfooter.com
  
  */
  * {margin:0;padding:0;} 
  
  /* must declare 0 margins on everything, also for main layout components use padding, not
  vertical margins (top and bottom) to add spacing, else those margins get added to total height
  and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
  html, body {height: 100%;}
  #wrap {min-height: 100%;}
  #main {
      overflow:auto;
      padding-bottom: 150px;  /* must be same height as the footer */
  }
  #footer {
      position: relative;
      margin-top: -150px; /* negative value of footer height */
      height: 150px;
      clear:both;
  }
  /*Opera Fix*/
  body:before {/* thanks to Maleika (Kohoutec)*/
      content:"";
      height:100%;
      float:left;
      width:0;
      margin-top:-32767px;/* thank you Erik J - negate effect of float*/
  }
  /* IMPORTANT
  You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.
  <!--[if !IE 7]>
  <style type="text/css">
      #wrap {display:table;height:100%}
  </style>
  < ![endif]-->
  */

补充（见到另外一种可以兼容）：
  #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
  }
  /* IE 6 */
  * html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight      :document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop :          document.body.scrollTop))+'px');
  }

3. CSS透明度
  div{
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
  }
  
4. @font-face语法
  @font-face {
    font-family: 'MyFontFamily';
    src:  url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
          url('myfont-webfont.woff') format('woff'),
          url('myfont-webfont.ttf')  format('truetype'),
          url('myfont-webfont.svg#svgFontName') format('svg');
  }
  
5. 浏览器hack
  .all-IE { property:value\9; }
  :root .IE-9 { property:value\0/; }
  .gte-IE-8 { property:value\0; }
  .lte-IE-7 {  *property:value; }
  .IE-7 {  +property:value; }
  .IE-6 { _property:value; }
  .not-IE {  property//:value;}
  @-moz-document url-prefix () { .firefox { property:value; } }
  @media all and (-webkit-min-device-pixel-ratio:0) { .webkit { property:value; } }
  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .opera { property:value; } }
  @media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit { property:value; } }
  
    /* IE 6 */
  * html .yourclass { }
  
  /* IE 7 */
  *+html .yourclass{ }
  
  /* IE 7 and modern browsers */
  html>body .yourclass { }
  
  /* Modern browsers (not IE 7) */
  html>/**/body .yourclass { }
  
  /* Opera 9.27 and below */
  html:first-child .yourclass { }
  
  /* Safari */
  html[xmlns*=""] body:last-child .yourclass { }
  
  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  body:nth-of-type(1) .yourclass { }
  
  /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  body:first-of-type .yourclass {  }
  
  /* Safari 3+, Chrome 1+ */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
   .yourclass  {  }
  }
  
6.PNG32透明(IE6)
  .some_element {
      background: url(image.png);
      _background: none;
      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  }

7.在js文件中加上下面这段
  if (!+[1,]) {
      (function() {
      var tags = [
          'article', 'aside', 'details', 'figcaption',
          'figure', 'footer', 'header', 'hgroup',
          'menu', 'nav', 'section', 'summary',
          'time', 'mark', 'audio', 'video'],
          i = 0, len = tags.length;
      for (; i < len; i++) document.createElement(tags[i]);
      })();
  }

8.文本溢出省略
  .textoverflow a {
      display:block;
      width:120px;
      margin: 0px 0px 0px 3px;
      white-space: nowrap;
      overflow: hidden;
      float: left;
      -o-text-overflow: ellipsis;     /* for Opera */
      text-overflow: ellipsis;        /* for IE */
  }
  .textoverflow:after{ content: "..."; }/* for Firefox */
  @media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
  
9.线性渐变
  background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
  background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
  background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
  background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );

10.多列排列
  #columns-3 {
     text-align: justify;
     -moz-column-count: 3;
     -moz-column-gap: 12px;
     -moz-column-rule: 1px solid #c4c8cc;
     -webkit-column-count: 3;
     -webkit-column-gap: 12px;
     -webkit-column-rule: 1px solid #c4c8cc;
  }

11.Google Font API
  <!-- Some special fonts -->In the <head>:
  /* Single font load*/
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
  /* Multiple font load*/
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard    +TT|Droid+Sans"><!-- Some special fonts -->
  In your CSS:
  body {
  font-family: 'Droid Serif', serif; font-size: 48px;
  }
  
12.text/image旋转（兼容）
  /* for firefox, safari, chrome, etc. */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  
  /* for ie */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  
  /* opera */
  -o-transform: rotate(30deg);

13.webkit下拉条样式设置
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-button{display:none}
  ::-webkit-scrollbar-track{background-color:black}
  ::-webkit-scrollbar-track-piece{background:#FFF}
  ::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}
  ::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
  ::-webkit-scrollbar-corner{background-color:#535353}
  ::-webkit-scrollbar-resizer{background-color:#FF6E00}

14.