css兼容性问题汇总即解决方案

做前端,兼容性,尤其是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引起的布局问题;详见:http://blog.csdn.net/chen943354086/article/details/45054453
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;

嗯,暂时就这些,注意积累,未完待续。。。

时间: 2024-11-10 13:49:21

css兼容性问题汇总即解决方案的相关文章

浏览器兼容性问题汇总

# 浏览器兼容性问题汇总 ## 问题1 ### first-child ## <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div p:first-child { color: red; } </style> </head> <

常见css兼容性

常见css兼容性:1.不同浏览器的标签默认的padding值和margin值不同. 解决方案:*{margin:0;padding:0} css reset技术: 2.块属性标签浮动,又有横向margin值的情况下,在IE6中会产生横向 margin值加倍. 解决方案:给浮动的对象加display:inline; 3.IE6下标签会有默认行高. 解决法案:给标签加overflow:hidden;触发BFC; 4.ul li和ol li ,中li不浮动和父级标签又没有高度的情况下,在 IE6.7中

《精通CSS:高级Web标准解决方案》学习笔记01

对我来说,CSS算得上是一个很难的东西.因为它不像JavaScript那么有趣,对记忆的要求太高,而我对浏览器兼容性.各种CSS Hack真的一点都不感冒.琐碎的.非理论化的知识,真的很烦人呐~ 鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐碎的布局知识集合的话,那这本书只能说是更加琐碎了,因为这只是一本纯纯的经验分享.而且随着前端技术的快速发展,明显能

[转]H5项目常见问题汇总及解决方案

html { line-height: 1.6 } body { font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #f3f3f3; line-height: inherit } body.rich_media

浏览器CSS兼容问题汇总及解决

由于公司项目要求兼容到IE6,这之中遇到不少CSS兼容性问题,所以就在博客汇总下来,以后在项目中遇到新的兼容性问题,也会在这里更新. 1.IE6下height属性会失效 问题描述:在IE6下,即使块级元素设置了高度,但若元素内部的内容超出设置高度,内部内容会把该块级元素高度撑开,height失效. 解决方法:对该块级元素设置overflow:hidden; 2.div存在最小高度 问题描述:在IE6下,块级元素会存在大概是13px默认最小高度,即使是空的div标签或者height属性设置比13p

【转】浏览器兼容性问题汇总

浏览器兼容性问题汇总 1:margin-left在IE6不生效(复现条件:块状元素.浮动.margin-left) ---------解决方法:http://www.seostudying.com/1233.html 2: position:fixed 在ie6 .ie7(quirk) . ie8(quirk)下被当成错误处理.-----------解决方法:http://blog.sina.com.cn/s/blog_106f3d140100yaok.html 解决思路:用 _position

H5 常见问题汇总及解决方案

原文链接:http://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg H5 项目常见问题汇总及解决方案 -- 由钟平勇分享 转自 https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,

IE和Firefox浏览器CSS兼容性技巧整理

转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 HTML5 兼容速查表 IE6/IE7/IE8三个版本的CSS兼容速查手册 CSS hack定义技巧浏览器兼容一览表 XHTML+CSS兼容性解决方案 CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的兼CSS

解决css兼容性

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HA