做前端,兼容性,尤其是ie6的兼容性是很头疼的问题,下面整理了一些常见的兼容性问题,以备参考(大部分来源网络):
先说下平时的好习惯:
1 html文档开头写上文档类型生命:dtd
2 css文件开头定义各种元素标签的默认属性:
例 *{border:none;margin:0;padding:0; font-family:SimSun;font-weight:nonmal;text-align:left;}
ul,li,ol{list-style:none;}
a:link{“`}
a:visited{···}
a:hover{····}
a:aciton{·····}
table{border-collapse:collapse;border-spacing:0px;}
3:对于需要撑开的父元素,记得在默认添加:用于重新计算容器的高度;
4 对于需要确定宽高的元素,习惯性加上overflow:hidden.有利于整体布局,不会变形。但是要注意显示的完整性;
5 对于文本性的布局,可以优先考虑text-align:center;line-height:10px;text-indent:10px;这样的属性进行控制居中,缩进等效果;
6 设置元素margin-top或者-bottom的时候想到父元素是否有padding或者border属性;因为会产生ie6 下的外边距重合;另外我的习惯是:单方向的设置margin或者padding;
7 overflow:hidden;我觉得好用;大家自己看着办咯
8 注意ie6下双边距问题;float:left;margin-left:10px;实际情况可就20px咯;(display:inline)
9 ie6 3px问题,目前遇到的不是很多;
10:float的利用,总是会有布局问题出现(在ie6下),一般我都尽量控制元素的宽高,能确定就确定,代价就是麻烦,且明显浪费时间去测量宽高数值;(ps:对否?)
11:明显适合用表格的别不用;(这点我还没做到,有时候做商品列表,也用div); 下面说当前css存在的兼容性问题吧(罗列一下):
1 ie6双边据,略,没得说
2 上下margin重合; 条件:元素存在文档流中,设置了margin上下边的属性; 表现:两个元素间的距离并不是上面的margin-bottom+下面元素的margin-top之和;而是其中大的一个,有正负的时候,结果为代数和; 解决:我习惯统一使用上或者下;
3 超链接的伪类不符合预期 原因:要按照顺序来:link->visited->hover->active
4 ie6,7 的hasLayout引起的布局问题
5 行内元素(span、p等)上下margin、padding无效; 我习惯设置为block;
6 ul在ie和ff的不同表现:看网络帖子有这么汇总的,我是没遇到,应该是因为我习惯性 padding和margin置0 了吧; 原因:ul在ie和ff下默认的margin和padding不同;
7 高度不能自适应、容器不自动扩展、子元素撑不开父元素: 多数是因为子元素都为浮动的,脱离了文档流,而父元素容器认为文档流中他的子元素为空,所以就高度为空勒; 解决:在父元素默认追加
8 img 显示有间隙的问题
解决:将display:block;然后设置width height。我认为这样可以有利于防止 图片尺寸不 合格而引起的布局变形问题;
9 ie6下设置了height很小的时候,依然会表现12px的高度。
原因:height在ie6下就是min-height的含义;而且12px基本是font-size的高度;所以咯
解决办法:我是font-size:0;(当无文字的时候);overflow:hidden;
先说下平时的好习惯:
1 html文档开头写上文档类型生命:dtd
2 css文件开头定义各种元素标签的默认属性:
例 *{border:none;margin:0;padding:0; font-family:SimSun;font-weight:nonmal;text-align:left;}
ul,li,ol{list-style:none;}
a:link{“`}
a:visited{···}
a:hover{····}
a:aciton{·····}
table{border-collapse:collapse;border-spacing:0px;}
3:对于需要撑开的父元素,记得在默认添加:用于重新计算容器的高度;
4 对于需要确定宽高的元素,习惯性加上overflow:hidden.有利于整体布局,不会变形。但是要注意显示的完整性;
5 对于文本性的布局,可以优先考虑text-align:center;line-height:10px;text-indent:10px;这样的属性进行控制居中,缩进等效果;
6 设置元素margin-top或者-bottom的时候想到父元素是否有padding或者border属性;因为会产生ie6 下的外边距重合;另外我的习惯是:单方向的设置margin或者padding;
7 overflow:hidden;我觉得好用;大家自己看着办咯
8 注意ie6下双边距问题;float:left;margin-left:10px;实际情况可就20px咯;(display:inline)
9 ie6 3px问题,目前遇到的不是很多;
10:float的利用,总是会有布局问题出现(在ie6下),一般我都尽量控制元素的宽高,能确定就确定,代价就是麻烦,且明显浪费时间去测量宽高数值;(ps:对否?)
11:明显适合用表格的别不用;(这点我还没做到,有时候做商品列表,也用div); 下面说当前css存在的兼容性问题吧(罗列一下):
1 ie6双边据,略,没得说
2 上下margin重合; 条件:元素存在文档流中,设置了margin上下边的属性; 表现:两个元素间的距离并不是上面的margin-bottom+下面元素的margin-top之和;而是其中大的一个,有正负的时候,结果为代数和; 解决:我习惯统一使用上或者下;
3 超链接的伪类不符合预期 原因:要按照顺序来:link->visited->hover->active
4 ie6,7 的hasLayout引起的布局问题
5 行内元素(span、p等)上下margin、padding无效; 我习惯设置为block;
6 ul在ie和ff的不同表现:看网络帖子有这么汇总的,我是没遇到,应该是因为我习惯性 padding和margin置0 了吧; 原因:ul在ie和ff下默认的margin和padding不同;
7 高度不能自适应、容器不自动扩展、子元素撑不开父元素: 多数是因为子元素都为浮动的,脱离了文档流,而父元素容器认为文档流中他的子元素为空,所以就高度为空勒; 解决:在父元素默认追加
8 img 显示有间隙的问题
解决:将display:block;然后设置width height。我认为这样可以有利于防止 图片尺寸不 合格而引起的布局变形问题;
9 ie6下设置了height很小的时候,依然会表现12px的高度。
原因:height在ie6下就是min-height的含义;而且12px基本是font-size的高度;所以咯
解决办法:我是font-size:0;(当无文字的时候);overflow:hidden;