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

前端与移动开发知乎
移动前端开发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前端开发 坑
前端与移动开发科目
» 本文来自:前端开发者 » 《前端开发跨浏览器兼容性总结》
» 本文链接地址:https://www.rokub.com/7700.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!