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

1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同;

解决办法:在CSS文件开头,加*{margin: 0; padding: 0;},把所有标签的margin和padding设置为0即可。

2. 在IE6中,块元素设置float并且有水平方向的margin时,margin显示出来会比设置的值大,会导致最后一块元素被顶到下面去;

解决办法:可以将块级元素display设置为inline。

3. 在IE6,IE7等浏览器,标签高度小于10px时,实际的高度会超出设置的高度,这是因为浏览器给标签设置了一个默认的最小高度;

解决办法:设置{overflow: hidden;},或者设置line-height小于你设置的高度。

4. 在某些浏览器中,图片有默认的间距(所有有文字属性的标签都会有边距,除非两个标签连在一起没有隔开);

解决办法:使用float为img布局,因为所有标签设置float之后都会变成块级元素,块级元素浮动时会紧挨在一起,没有边距;此外可以让HTML的img标签紧挨在一起,不要隔开,但是会影响HTML文档的结构,不太美观。

5. 标签最低高度设置min-height不兼容问题;

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

6. IE9以下浏览器不能使用opacity;

解决办法:{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}

7.两个块级元素,父元素设置了overflow:auto,子元素设置了position:relative ,且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

解决办法:父级元素设置position:relative。

原文地址:https://www.cnblogs.com/yuanyiming/p/10777138.html

时间: 2024-08-06 14:05:20

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

GATK errors 及解决办法 (持续更新)

1, MESSAGE: Input files reads and reference have incompatible contigs: Relative ordering of overlapping contigs differs, which is unsafe.##### ERROR   reads contigs = [Chr1, Chr10, Chr11, Chr12, Chr2, Chr3, Chr4, Chr5, Chr6, Chr7, Chr8, Chr9, ChrSy,

java 编译异常及其解决办法(持续更新)

java 编译异常及其解决办法(持续更新) 1.解决办法:将jar版本降低适配 低版本的jdk或tomcat 1 严重: ContainerBase.addChild: start: 2 org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/EasyGo]] 3 at org.apach

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

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

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

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

Web前段开发人员须知的常见浏览器兼容性问题及解决技巧

为什么会有兼容性问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,

常见浏览器兼容性问题及解决方法(不断收集更新中)

问题一:不同浏览器的标签默认的margin和padding不同 解决方法: * { margin:0; padding:0;} 问题二:IE6双倍margin(块属性+float+横向margin) 说明:如div+css布局,<div style="float: left;margin-left: 10px;"></div>,在IE6下显示会有margin-left:20px的距离 解决方法:_display:inline 问题三:IE6下的浮动元素和非浮动元

手机端页面在项目中遇到的一些问题及解决办法(持续更新)

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题.解决方案是: (1) 看是否能把body和html的height: 100%去除掉. (2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}. 2.ios页面橡皮弹回效果遮挡页面选项卡? (1) 有时

div+css常见浏览器兼容问题以及解决办法

1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙,解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样.细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object

常见浏览器兼容性问题与解决方案【转】

常见浏览器兼容性问题与解决方案 原文:http://blog.csdn.net/chuyuqing/article/details/37561313/ 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按