浏览器的兼容性问题与解决

所谓的浏览器兼容性问题,是因为不同浏览器对同一段代码有不同的解析,造成页面显示效果不同的情况。而我们的需求是不同浏览器打开我们的网站效果是一致的,所以前端开发之前必须把兼容性问题解决。

一:不同浏览器内容之间默认的内边距与外边距不同。

解决:在css开头里加入 * { padding : 0; margin : 0 ;  }   *通配符来设置浏览器的内,外边距都为0。

二:设置块级margin X像素时,ie6显示margn比设置打的大。

解决:同样css中加入  * { padding : 0; margin : 0 ;  }  ,这个样式解决很多兼容问题。

三:设置 min-height样式时,ie6,ie7,遨游超出自身设置的高度。

解决:给超出的高度标签设置 overflow:hidden ,或者设置行高line-height 小于你设置的高度。

四:行内标签设置 display : block 设置float : left后,ie6仍然存在边距问题。

解决:在display : block; 后面加入display : inline;display : table。

五:图片默认有间距

解决:使用float属性或者margin布局。

第六:标签最低高度设置min-height不兼容

解决:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{ min-height : 200px; height : auto !important; height : 200px; overflow : visible; }

第七:透明度的兼容

解决:CSS hack。 我们可以把浏览器分为三类:ie6,ie7,遨游。ie6使用 _ 开头,ie7使用 * 开头,ie8使用 /9结尾。

时间: 2024-11-10 15:30:18

浏览器的兼容性问题与解决的相关文章

浏览器样式兼容性问题及解决方式(一)

工作中常常会碰到浏览器样式兼容性的问题.从今天開始,收集和整理一些常见的兼容性问题,系统的学习下前端知识.欢迎大家指正交流. 1.浏览器默认的标签内外边距不同,用通配符*统一设置为0 *{margin:0px; height:0px;} 2.标签最低高度min-height不兼容 {min-height:200px; height:auto !Important; height:200px; overflow:visible;} 3.设置较小高度标签 当给指定标签设置较小高度时,就碰到与浏览器默

IE浏览器常见CSS兼容性问题及解决办法

对于前端开发者来讲,世界上存在着一个神奇的东西——IE浏览器,尤其是低版本的IE浏览器,惨不忍睹的兼容性使其臭名昭著.前端工作者很多的时间都花在了和它打交道上,所以大家纷纷吐槽IE浏览器如何的渣,简直是万恶之源.但是IE浏览器市场份额有非常大,喷完还要接着搞兼容.对于IE浏览器来讲,我们应该有一个客观的评价.首先其兼容性差,原因可想而知,更新速度太慢,要几年才出一个版本,而市场上的FireFox.chrome等浏览器几个月就有一个版本上市.中间那么长的时间足以将其bug充分的暴露出来,其他浏览器

常见浏览器兼容性问题与解决方式

所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发者常常会碰到和必需要解决的问题. 在学习浏览器兼容性之前,我想把前端开发者划分为两类: 第一类是精确依照设计图开发的前端开发者,能够说是精确到1px的,他们非常easy就会发现设计图的不足,而且在非常少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览

常见浏览器兼容性问题及解决办法总结(持续更新中...)

1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同: 解决办法:在CSS文件开头,加*{margin: 0; padding: 0;},把所有标签的margin和padding设置为0即可. 2. 在IE6中,块元素设置float并且有水平方向的margin时,margin显示出来会比设置的值大,会导致最后一块元素被顶到下面去: 解决办法:可以将块级元素display设置为inline. 3. 在IE6,IE7等浏览器,标签高度小于10px时,实际的高度会超出设

浅谈浏览器的兼容性

浏览器的兼容性浅谈 Css兼容性 <span>标签在IE下要放在前面,否则IE会有问题. IE6下没有min-width的概念,起默认的width就是min-width IE6下两个float之间会有3px的bug IE6图片的下方会有空隙 IE6下margin:0 auto不能剧中,解决:为其父容器设置text-align:center A标签的伪类一定要按LV H A的顺序写,否则ie6有错误 Javascript的兼容性 绑定事件不一样.标准的绑定事件为addEventListener,

谈谈浏览器的兼容性

(一)html部分 1. H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></script> <![endif]--> html5shiv.js下载地址: https://github.com/aFarkas/html5shiv/releases 2. ul标签内外边距问题ul标签在IE6\

CSS对浏览器的兼容性常见处理方式小结

CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内容不要换行. 2. margin加倍的问题:设置为float的div在ie下设置的margin会加倍. 这是一个ie6都存在的bug. 解决方案:在这个div里面加上display:inline; 例如:<#div id=”imfloat”>相应的css为 #IamFloat{ float:lef

MyEclipse使用教程:Linux Internal Web浏览器的兼容性

MyEclipse特性与Linux内部web浏览器的兼容性问题 Eclipse 3.3现在支持所有平台上的Mozilla浏览器(对Mozilla的迟滞无处不在),对于无处不在的Mozilla更多信息:详见bug#7923.对于MyEclipse的Linux用户来说,这就意味着附带的MyEclipse 6.0嵌入的Mozilla浏览器核心可以作为Eclipse平台的核心浏览器,随着附带的MyEclipse 6.0嵌入的Mozilla浏览器核心需要MyEclipse的特性如下: 需要嵌入MyEcli

浏览器兼容的问题及解决方法收集收集

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline;    例如:    <#div id=”imfloat”>    相应的css为    #IamFloat{