2013-new-note

hack写法
下划线“_”针对ie6,例如:_width:100px;
星花“*”针对ie6和ie7,例如:*width:200px;
斜线+数字零针对ie8:,例如:width:300px\0;
斜线+数字九针对ie(6、7、8):,例如:width:400px\9;
在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. width:100%存在的问题,如果页面父级以上用了width:100%,子元素定了width:XXXpx,
当窗口缩小时,小于子元素规定的宽度XXXpx,页面会出现右边空白(规定的宽度和浏览器宽度差距造成的),
SO自适应浏览器时谨慎使用规定宽度,如必要可用min-width。ie7下min-width无效直接显示max-width的值。


8. .title-font{font-family: 'helvetica neue', 'hiragino sans gb', 'stheiti', 'microsoft yahei', \5FAE\8F6F\96C5\9ED1,tahoma,sans-serif;-webkit-font-smoothing:antialiased}

10. 好可怜不能用margin负值

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

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

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

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

posted @ 2014-02-06 14:46  2公子  阅读(229)  评论(0编辑  收藏  举报