常见的IE浏览器的一些兼容问题及解决方法

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

碰到频率:100%

解决方案:CSS里    *{margin:0;padding:0;}

备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

碰到频率:60%

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

备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设置的间距

碰到几率:20%

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

备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的 margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上 display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

碰到几率:20%

解决方案:使用float属性为img布局

时间: 2024-12-15 22:32:54

常见的IE浏览器的一些兼容问题及解决方法的相关文章

iphone 浏览器自动解析数字为号码解决方法

iphone 浏览器自动解析数字为号码解决方法 www.MyException.Cn  网友分享于:2015-10-09  浏览:0次 iphone 浏览器自动解析数字为号码解决办法 在工作中遇到了这么一个问题 —— 在HTML代码中有一部分数字,设定的样式为“白色”,在android 浏览器 和 PC web中显示都是正常的,但是在iphone浏览器中先显示为白色,之后有变为“黑色”,在点击这串数字的时候,显示为拨打电话界面. 分析: 根据上图展现的方式说明“1234-5678-9999”添加

chrome浏览器默认启动时打开2345导航的解决方法

2345并没有修改chrome内部设置,它只是把所有的快捷方式修改了,包括开始菜单旁边的快捷启动图标. 只需要右键chrome快捷方式,在目标一栏中,把"----chrome.exe"引号后面的所有东西删除,然后确定,就不会再有问题了.开始菜单旁边的小chrome图标一样方法都可以解决... 而若在更改目标位置时出现需要一"您的权限不足,请点击继续来获得权限." 解决方法: 对计算机图标,击右键,选择管理. 开界面后,选择本地用户和组,单击用户,选择administ

常见的浏览器兼容问题和解决方法

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

浏览器兼容问题与解决方法

浏览器兼容问题是指,不同厂商开发的浏览器针对同一段代码的不同解析,造成页面展示效果出现差异的情况,很多时候为了追求显示效果的一直,前端开发人员就要针对不同兼容问题应用相应的方法处理,达到效果一致的目的. 下面这些是平时开发过程中遇到的,做个汇总,方便查阅. 1.<!DOCTYPE HTML>文档类型的声明 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.横向双外边距 产生条件:在IE6中块元素浮动后(左浮左margin

IE浏览器兼容问题的解决方法

最近在写网页遇到遇到一些网页兼容的问题特别多,其中一个就是我这边的IE,360是没有看出问题的.但是到了客户那边却出现了很严重的页面变形问题,想了一下,应该就是大家的浏览器版本不一样导致的,我是按照自己的版本来写网页,也有测试IE8910的兼容性.当然,如果客户那边能够使用版本高一点的浏览器就最好了,但这是政府的项目不能这么要求他们,只能自己解决. 查了一下资料找到这个答案:从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染.兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添

IE下的浏览器兼容问题及解决方法2

浏览器差异 1.ul和ol列表缩进问题 消除ul.ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效,padding属性对FireFox有效. [注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进.空白以及列表编号或圆点,设置padding对样式没有影响:在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须

IE8部分兼容问题及解决方法

前端作必须与网页打交道,浏览器的兼容是前端性处理是前端工作很重要的一部分,下面将工作中遇到的IE8的兼容问题做了以下的总结: 一.在设置样式的mouseover等操作,并增加新的className时,会出现其他DOM的active样式会增加到其他DOM上面 1.原因:active时的样式名称会有影响 2.解决方法:active的className不要使用相同名称 二.在IE8中,设置position:absolute时,一般不会起作用,会被下面的元素遮挡 主要采取的解决方法是:该标签的最高级父元

IE6/IE7浏览器不支持display: inline-block;的解决方法

display: inline-block;在IE6与IE7中存在bug. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征

Microsoft ReportViewer 控件类型版本兼容问题及解决方法

错误 Parser Error Message: The base class includes the field 'rvEquipment', but its type (Microsoft.Reporting.WebForms.ReportViewer) is not compatible with the type of control (Microsoft.Reporting.WebForms.ReportViewer). 添加引用,因为项目的.Net框架版本是4.0,因此Report