自己踩过的坑、网上收集、及一些常用的小代码方便以后复制黏贴。
1.手机端必要申明:<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
2.强制不换行,省略号:overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all
3.flash透明:<param name="wmode" value="transparent" /> 不要有: <param name="wmode" value="opaque" />
4.object 挡住div ,object添加<param name="wmode" value="opaque" />即可
5.低版本IE的hack:IE6下“_”,IE7下“*”
6.p始终有外边距,严格检查编辑器是否有空格!
7.IE6,7 margin负值BUG,给负值元素加:*zoom:1;_position:relative;
8.去掉chrome、火狐(以及360)input在得到焦点时出现黄色(蓝色)边框的方法:input{outline:0px;}
9.jq width()方法用于获得元素宽度;innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来
10.jq使用animate()时,最好在前面加个stop()
11.简单粗暴处理冒泡,用mouseenter 、 mouseover ,只会在绑定的元素上触发。 mouseleave 同理
12.透明兼容IE:filter:alpha( topacity=70);opacity:0.7
13.IE7 line-block 无效,使用:*display:line;平稳退化
14.iframe在ie78 下默认背景是白色,需要透明设置: allowTransparency="true" ,iframe里video标签没有全屏按钮,是因为iframe没有加“allowfullscreen=true”
15.firefox 单独hack:@-moz-document url-prefix() { .requi{position: relative;top: -18px;} }
16.jquery 动画效果从哪儿爆开,与定位left right bottom top 有关
17.元素设置position后,margin属性IE7下失效问题:元素同级的地方加:<!–[if lte IE 7]><div></div><[endif]–>
18.图片响应式布局:img标签时:width:100%;max-width:100%; 背景图时:background:url(../images/xx.jpg) 50% 50% no-repeat;-webkit-background-size:cover;background-size:cover;margin-bottom:20px;padding-top:56%(图片宽/高比);
19.video标签有一个很操蛋的属性就是,宽和高中的其中一个属性碰到了父级盒子的边缘,那video就不在自适应或者遵循CSS的样式,解决方法,只给width:100%;不要高度属性
20.手机端,去掉点击时的背景色:-webkit-tap-highlight-color: transparent
21.flex 布局:father {display:flex; display:-webkit-flex; flex-flow:row; -webkit-flex-flow:row; justify-content:space-around; }child { box-flex:1.0; -webkit-box-flex:1.0; }
22.护眼色:background-color:#C7EDCC
23.很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug
24.js 同名函数始终执行最后一个函数
25.IE678 background:url() no-repeat;注意中间的空格
26.word-wrap:break-word;word-break:break-all;解决英文 不换行,遇到“-”换行问题 ;但是单词会被强制断开,原因是数据库读出的 需要用JS控制:
<script type="text/javascript"> var a=document.getElementById("a").innerHTML; alert(a); a = a.replace(/ /g," "); document.getElementById("a").innerHTML=a; </script>27.闭包阶乘:
var a = (function(n){ if(n<1){ alert("invalid arguments"); return 0; } if(n==1){ return 1; } else{ return n * arguments.callee(n-1); } })(4); document.writeln(a); //()()这个形式:第一个括号里是一个函数,先假设函数名为myFun,第二个括号里的数据则为函数myFun的参数。 //而且myFun不用经过调用就可以执行一次。