前端开发跨浏览器兼容性总结

前端与移动开发知乎

移动前端开发h5

前端开发转移动端测试

1、css reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

ul,ol{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:”;}

2、盒子模型：即一块矩形区域，标准浏览器里的width和height只是指“内容区域”的宽度和高度，整个盒子的尺寸是由width,height,padding,margin,border决定的；

火狐下对容器定义了height后，容器边框的外形就确定了，不会被内容撑大；但IE6下会被内容撑大；

3、对空DIV设置较小的height，有时在IE6下不起作用，添加font-size:0解决；

4、 IE6的浮动双边距问题 ：发生在 “左浮动+左margin”和“右浮动+右margin”的情况下，而且浮动的元素接触到包含块的边缘时才发生，给浮动元素添加display:inline解决；

5、 float定宽 ：IE6下如果float元素没有定宽，内部的div定义了height或zoom:1,这个div就会占满一整行，即使给定了它的宽度；为了保持更大的兼容性，当float元素作为布局元素或复杂的容器时，都要指定宽度；

6、 position问题 ：

IE6 Bug:当position：relative元素被带有overflow:auto/scroll属性的块元素包含时，会表现出position:absolute的行为；

解决方法：1）为包含块元素添加position:relative；2）去掉该元素的position:relative，改为static,通过margin-top实现类似的效果；

7、修复IE6的3像素Bug:问题发生在浮动列遇到非浮动列，分2种情况；

1）非浮动列没有设置宽度时，非浮动列沿着浮动元素边缘的那块有3像素的缩进，修复方法：给非非浮动列添加zoom:1;

2）非浮动列有一个宽度或高度时，两列间会出现3像素的空白，修复方法：a、非浮动列{margin-left:0;}b、浮动列{margin-right:- 3px;}

8、 div的垂直居中问题 ：

文字：{vertical-align:middle;line-height:30px;height:30px;}

图片与文字共同居中：图片属性要设align=”absmiddle”

前端与移动开发2016

移动端web前端开发坑

前端与移动开发科目