2013-new-note

hack写法
下划线“_”针对ie6，例如：_100px;
星花“*”针对ie6和ie7，例如：*200px;
斜线+数字零针对ie8:，例如：300px;
斜线+数字九针对ie（6、7、8）:，例如：400px9;
在css中注意写的顺序

1. mac上面字体一定要加line-height或者height，mac上面的字体有问题！有问题!有问题!有问题！！！

*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***

2. 搜索框采用定位。我的<input type="text" placerhold="搜索提示" /> 不能用了!!!
<div><input /><span>搜索提示</sapn><a href="">搜索ico</a></div>

7. 图片幻灯片的时候，图片平铺，定位~~

*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***

3. 一定要写全 position:absolute;top:0;left:0; 否则IE7不行~

4. 兼容写法

渐变
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

阴影
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

5. opacity

/* internet explorer */
-khtml-opacity: 0.5;
/* khtml, old safari */
-moz-opacity: 0.5;
/* mozilla, netscape */
opacity: 0.5;
/* fx, safari, opera */
filter: alpha(opacity=50);

6. 100%存在的问题,如果页面父级以上用了100%,子元素定了XXXpx，
当窗口缩小时，小于子元素规定的宽度XXXpx,页面会出现右边空白（规定的宽度和浏览器宽度差距造成的），
SO自适应浏览器时谨慎使用规定宽度，如必要可用min-width。ie7下min-width无效直接显示max-width的值。

8. .title-font{font-family: 'helvetica neue', 'hiragino sans gb', 'stheiti', 'microsoft yahei', 5FAE8F6F96C59ED1,tahoma,sans-serif;-webkit-font-smoothing:antialiased}

10. 好可怜不能用margin负值

11. float:left;无效情况，写明了宽度元素写了clearfix并且父元素也写了clearfix,需要把本身的元素clearfix去掉。

12. 截取字段...
260px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

13. float就不要用inline-block，用inline， 要用inline-block，就加个_zoom: 1;*zoom: 1;就可以

14. ie7不会继承父级的width,且ie7下图片不会自动有宽度