浏览器不兼容处理方法

合集下载

浏览器兼容解决方案

浏览器兼容解决方案

浏览器兼容解决方案
《浏览器兼容解决方案》
在互联网时代,浏览器兼容性问题是网站开发人员不得不面对的一个挑战。

不同浏览器对HTML、CSS和JavaScript的解释
存在差异,因此同一个网页在不同浏览器上可能会显示不同的效果,甚至无法正常加载。

为了解决这一问题,我们需要采取一些兼容性解决方案。

首先,使用最新的Web标准。

随着HTML5和CSS3等新技术
的不断发展,很多老版本的浏览器并不支持这些新特性。

因此,在设计网页时,尽量采用最新的Web标准,以确保网页在大
部分现代浏览器上能够正常显示。

其次,进行浏览器检测和特性检测。

借助JavaScript,我们可
以检测用户正在使用的浏览器和其版本,根据不同浏览器的特性来加载不同的代码,以确保页面在各种浏览器上都能够良好地显示和运行。

另外,采用CSS Reset。

不同的浏览器对CSS的默认样式存在
差异,因此在设计网页时,我们可以使用CSS Reset来重置不
同浏览器的默认样式,以确保网页的外观在各种浏览器上保持一致。

最后,采用浏览器嗅探和用户代理检测。

通过浏览器嗅探和用户代理检测,我们可以获取用户的浏览器信息,从而根据用户的浏览器来加载不同的样式和脚本,以确保网页在不同浏览器
上都能够正常运行。

总之,针对浏览器兼容性问题,我们可以采取上述一些解决方案来解决。

只有通过不懈的努力和探索,我们才能够让我们的网页在各种浏览器上都能够完美地呈现。

浏览器兼容性问题及解决方案

浏览器兼容性问题及解决方案

浏览器兼容新问题W3C对标准的推进,Firefox,Chrome,Safari,Opera的出现,结束了IE雄霸天下的日子。

然而,这对开发者来说,是好事,也是坏事。

说它是好事,是因为浏览器厂商为了取得更多的市场份额,会促使各浏览器更符合W3C标准,而得到更好的兼容性,并且,不同浏览器的扩展功能(例如 -moz,-webkit开头的样式),对W3C标准也是个推进;说它是坏事,因为,多个浏览器同时存在,这些浏览器在处理一个相同的页面时,表现有时会有差异。

这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。

我们把引起这些差异的问题统称为“浏览器兼容性问题”。

而正是这些“浏览器兼容性问题”,无形中给我们的开发增加了不少难度。

从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类:1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题。

2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM、BOM方面的问题。

对于某些浏览器的功能方面的特性,也属于这一类。

3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的。

例如下面的页面,是一个渲染相关的问题:在各个浏览器中都表现的不同,这就属于兼容性问题。

造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同。

现今常见的浏览器及其排版引擎(又称渲染引擎)及脚本引擎,如下:而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码,不规范的代码会使不兼容现象更加突出。

例如:不规则的嵌套:DIV 中直接嵌套 LI 元素是不合标准的,LI 应该处于 UL 内。

此类问题常见的还有 P 中嵌套 DIV, TABLE 等元素。

不规范的DOM接口和属性设置:上面代码中top的值,其实应该是一个字符串值,需有单位。

例如:35px。

总之,人为的原因也占很大一部分。

ie11兼容性设置方法及常见问题处理方法

ie11兼容性设置方法及常见问题处理方法

IE11兼容性设置方法及常见问题处理方法
在我们的日常生活中,经常翻开一些如银行网银、QQ空间、一些公司内网网站,但是由于新的IE可能与现有网页的版本存在兼容性问题,可能出现插件无法安装,网页无法翻开情况,这就需要考虑使用兼容性设置的方法来解决以上问题,下面详细说明设置方法:
1〕翻开ie,点击设置“齿轮〞,再点击兼容性视图设置,如以下图:
2〕点击“添加〞按钮来添加要使用兼容形式的网站,并点击“关闭〞;
3〕在桌面IE形式中,按键盘“F12”按钮调出左侧;黑色菜单,如右图,选择最后一项,将用户代理;字符串选择为IE10、IE8、IE7、IE6试试。

IE 11常见问题问题及处理方法:
Q:腾讯QQ空间、QQ音乐、DZ论坛无法正常阅读
A:目前暂无更好解决方案,只能尝试使用兼容性设置,假设无效建议等待以上网站更新以支持最新的IE11增强保护形式暂不完善。

Q:无法新建选项卡,,首页设置为空白翻开出错,工行网银助手无法正常使用A:IE选项-高级取消"启用增强保护形式"勾选,确定,关闭并重新翻开IE 即可恢复。

Q:优酷等视频网站无法阅读,支付宝、建行等插件无法正常使用
Q:网页字体模糊,或者各种显示异常。

兼容性视图无效
A:翻开Internet选项,高级选项卡,将“加速的图形〞分类下的“使用软件呈现而不使用GPU呈现〞勾选,确定,关闭并重新翻开IE即可。

浏览器不兼容原因及解决办法

浏览器不兼容原因及解决办法

1.文字本身的大小不兼容。

同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。

解决方案:给文字设定line-height。

确保所有文字都有默认的line-height 值。

这点很重要,在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。

所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题,横向上的。

如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。

故,内容可能撑破的浮动容器需要定义width。

小实验:有兴趣大家可以看看这段实验。

在不同浏览器下分别测试以下各项代码。

a.<div style=”border:1px solid red;height:10px”></div>b.<divstyle=”border:1px solid red;width:10px”></div>c.<div style=”border:1px solid red;float:left”></div>d.<div style=”border:1px solid red;overflow:hidden”></div>上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div style=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。

实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。

浏览器兼容问题及解决方案

浏览器兼容问题及解决方案

浏览器兼容问题及解决⽅案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同⼀段代码有不同的解析,造成页⾯显⽰效果不统⼀的情况。

在⼤多数情况下,我们的需求是,⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统,都应该是统⼀的显⽰效果。

所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。

浏览器最关键的部分就是它的渲染引擎(Rendering Engine),也就是⼤家平常所说的的“内核”。

市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对⽹页的解析存在⼀定的差异。

常见的浏览器内核代表有五种,分别是Trident、Gecko、Blink、Webkit、Presto 。

他们代表的浏览器是:Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器;Gecko:代表作品Mozilla Firefox 是开源的,它的最⼤优势是跨平台,能在Microsoft Windows、Linux和MacOS X等主要操作系统上运⾏;Webkit :代表作品Safari、Chrome ,是⼀个开源项⽬;Presto :代表作品Opera ,Presto是由Opera Software开发的浏览器排版引擎。

它也是世界上公认的渲染速度最快的引擎;Blink :由Google和Opera Software开发的浏览器排版引擎,2013年4⽉发布。

下⾯介绍⼀些常见的浏览器兼容问题及解决⽅案。

1、不同浏览器的标签默认的外补丁和内补丁不同解决⽅案: css ⾥增加通配符 * { margin: 0; padding: 0; }。

2、IE6双边距问题;在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案:设置display:inline;3、当标签的⾼度设置⼩于10px,在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案:超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案:使⽤float 为img 布局。

解决跨浏览器兼容性问题的技巧

解决跨浏览器兼容性问题的技巧

解决跨浏览器兼容性问题的技巧在开发网站和应用程序时,跨浏览器兼容性问题是一个常见的挑战。

不同的浏览器有自己的特性和实现方式,因此相同的代码在不同的浏览器上可能会有不同的效果。

在本文中,我们将探讨一些解决跨浏览器兼容性问题的技巧。

1.使用标准化的HTML和CSS:遵循HTML和CSS的标准化规范可以减少浏览器之间的差异。

确保您的代码是规范的,不依赖于特定浏览器的特性,可以帮助您减少兼容性问题。

2.重置/标准化CSS:不同的浏览器对默认样式有不同的实现。

通过使用CSS重置或标准化样式,可以确保在不同的浏览器上具有统一的外观和表现。

3.使用浏览器特定的CSS前缀:不同的浏览器在支持某些CSS属性时使用不同的前缀。

例如,-webkit-前缀用于Webkit内核的浏览器(如Chrome和Safari),-moz-前缀用于Firefox。

通过为不同的浏览器提供相应的前缀,可以确保您的代码在这些浏览器上正确地显示。

4.使用CSS Hack:CSS Hack是指为了在特定的浏览器上应用特定的CSS规则而使用的代码。

尽管在某些情况下可能需要使用CSS Hack来解决兼容性问题,但尽量避免使用它们,因为它们可能会导致代码变得混乱和难以维护。

5.使用浏览器特定的JavaScript代码:类似于CSS,不同的浏览器可能有不同的JavaScript实现。

为了解决跨浏览器兼容性问题,您可能需要使用浏览器特定的JavaScript代码或检测浏览器特征来应用不同的解决方案。

6.使用JavaScript库:使用流行的JavaScript库(如jQuery)可以帮助解决跨浏览器兼容性问题。

这些库通常对不同的浏览器进行了封装和优化,并提供了一致的API,使您的代码更容易跨浏览器运行。

7.测试和调试:在开发过程中,进行多次测试和调试非常重要。

确保您的网站或应用程序在不同的浏览器和版本上正常运行,并处理任何兼容性问题。

8.知识更新和研究:跨浏览器兼容性问题是一个不断变化的领域。

笔记本电脑ie11不兼容如何解决

笔记本电脑ie11不兼容如何解决

笔记本电脑ie11不兼容如何解决笔记本电脑作为一种新兴的时尚潮流商品,在人们日常工作、学习和生活中日趋普及,起到越来越重要的作用,但是笔记本电脑用久了也会给我们带来些问题,比如ie11不兼容,遇到这种情况我们具体该怎么解决呢?下面就由店铺跟大家分享一下解决方法吧,欢迎大家来阅读学习。

笔记本电脑ie11不兼容解决方法方法一、添加受信任的站点1、打开IE11浏览器,点击浏览器右上角的“工具”选项,再选择“Internet选项”;2、点击界面的上方的“安全”选项卡,然后点击“受信任的站点”;3、点击“站点”,添加该行的网站即可。

方法二、添加兼容性视图设置1、打开IE11浏览器,点击浏览器右上角的“工具”选项,再选择“兼容性视图设置”选项;2、将该行网站添加到“兼容性视图中的网站”;3、关闭IE11浏览器,重新登入。

方法三、关闭保护模式1、打开IE11浏览器,点击右上角的“工具”选项,再选择“Internet选项”;2、点击界面的上方的“安全”选项卡,然后点击“Internet”;3、把“启用保护模式”的勾选去掉,另外,切换到“高级”选项卡,找到“增强保护模式”,如果前面有勾选并可选的话,请您将前面的勾去掉;4、关闭IE11浏览器,重新登入。

方法四、禁用GPU硬件加速如果用户的电脑是没有独立显卡的老机器,在用IE11观看优酷之类的在线视频时,会出现切换为全屏模式后当前视频就自动关闭的异常状况。

这是由于用户的集成显卡不支持硬件加速导致的,只要将当前的Flashplayer播放插件卸载,并安装10.2及以下版本即可解决。

此外,如果用户并不想在以后升级自己电脑,在进行下面的操作:1、打开IE,点击右上角的“工具”选项,再选择“Internet选项”;2、点击界面的上方的“安全”选项卡,然后点击“Internet”;3、把“启用保护模式”的勾选去掉,另外,切换到“高级”选项卡,找到“使用软件呈现而不使用GPU呈现”选项,如果前面有勾选并可选的话,请您将前面的勾去掉;4、关闭IE,重新打开该网站。

关于系统浏览器兼容问题解决办法

关于系统浏览器兼容问题解决办法

关于研究生信息管理系统的兼容性问题,现提出如下解决方法。

1、本系统建议使用IE6或以上版本浏览器,查看个人电脑浏览器版本方法如下:
打开IE浏览器,点击页面上面的帮助,选择关于Internet Explorer。

2、IE浏览器兼容性设置。

点击页面上的工具按钮,选择兼容性视图。

或者点
击兼容性视图设置,选择添加研究生院网站。

如下图
3、360浏览器兼容性设置。

在360浏览器的网址输入栏右侧点击或者图标
选择浏览模式。

如下图
4、搜狗浏览器兼容性设置。

在搜狗浏览器的网址输入栏右侧点击或者
切换视图模式。

如下图
注:若搜狗版本为2014最新版 5.0.10.13383。

则在网址输入栏的左侧点击切换视图模式,选择切换到兼容。

如下图。

不兼容的解决方法

不兼容的解决方法

不兼容的解决方法在互联网的发展过程中,我们经常会遇到不同系统、软件或设备之间的兼容性问题。

这些问题严重影响了用户的体验和使用效果,给我们的工作和生活带来了很多麻烦。

然而,我们并不需要过分担心,因为在互联网技术的不断进步中,有许多解决不兼容问题的方法可以帮助我们顺利解决这些困扰。

一、升级软件或系统版本当我们使用的软件或系统版本过旧,可能会导致与其他新版本的软件或系统不兼容。

为了解决这个问题,我们可以考虑升级软件或系统到最新版本。

新版软件或系统通常会在兼容性方面做出改进,从而提供更好的使用体验。

同时,及时升级还能够获取到更多的功能和安全性保障。

二、使用中间件或协议转换有时候,我们遇到的不兼容问题是由于不同设备或系统使用了不同的数据格式或通信协议造成的。

此时,使用中间件或协议转换工具就能派上用场。

中间件可以作为一个媒介,将不同设备或系统之间的数据进行转换和协调,实现兼容性。

通过使用中间件或协议转换工具,我们可以有效地解决不兼容问题,使各个系统能够正常通信和协作。

三、制定统一标准或协议在解决不兼容问题时,制定统一标准或协议是一种非常有效的方法。

当不同的软件或系统遵循同一套标准或协议时,它们之间的兼容性将得到保证。

制定标准或协议需要各方共同努力,包括软件开发者、厂商、行业协会等。

通过统一标准或协议,我们可以避免不兼容问题的产生,提高互联网的互通性和便利性。

四、虚拟化技术虚拟化技术可以在一台物理设备上创建多个虚拟环境,使得不同的软件或系统可以独立运行,互不干扰。

通过使用虚拟化技术,我们可以将不兼容的软件或系统分别运行在不同的虚拟机中,从而避免可能引起的兼容性问题。

虚拟化技术为我们提供了一种灵活的方式来解决不兼容问题,同时能够更好地管理和利用资源。

总结:在互联网技术的快速发展中,不兼容问题时有发生。

然而,通过升级软件或系统版本、使用中间件或协议转换、制定统一标准或协议以及运用虚拟化技术等方法,我们可以有效地解决这些问题。

浏览器兼容性问题的解决方案

浏览器兼容性问题的解决方案

浏览器兼容性问题的解决方案随着互联网的不断发展,浏览器已经成为人们日常生活中必不可少的工具之一。

然而,不同的浏览器和浏览器版本之间的兼容性问题却给网站开发和维护带来了诸多麻烦。

本文将探讨浏览器兼容性问题带来的影响以及解决方案。

一、浏览器兼容性问题的影响1.用户体验不佳在不同的浏览器和版本下,网站的显示效果和交互体验往往差异很大,这会导致用户在使用网站时出现卡顿、界面错乱、功能失效等问题,影响用户的使用体验。

2.网站表现不佳由于不同的浏览器对网站代码的解释和执行方式不同,故网站在兼容性方面存在一定的缺陷。

这会导致网站在某些浏览器和版本下出现性能问题,例如加载速度变慢、页面响应时间变长等。

3.网站SEO降低由于不同的浏览器在搜索引擎中的排名不同,因此网站在兼容性方面出现问题会直接影响网站的搜索排名和SEO结果,降低网站被搜索引擎收录的概率和搜索排名。

二、1.编写符合标准的HTML、CSS和JavaScript代码兼容性问题的主要原因是网站代码不符合标准,因此,编写符合标准的代码是避免兼容性问题的基本手段。

在编写代码时要符合W3C标准,并注意不要使用浏览器非标准的属性和方法。

2.尽量避免使用特定浏览器的特定功能尽量避免使用特定浏览器的特定功能,以避免兼容性问题。

如果非常需要使用某个功能,则需要对该浏览器进行特别处理。

这可以通过JavaScript语言的特异性或条件注释来实现。

3.使用开源框架开源框架具有成熟的代码库,同时还能避免浏览器兼容性问题的发生。

常见的开源框架包括React、Angular和Vue.js等。

4.使用CSS Reset或Normalize.cssCSS Reset可以将所有浏览器的默认样式清空,从而减少兼容性问题的发生。

Normalize.css则可以实现一些浏览器的标准一致,从而让网站表现更稳定。

5.使用polyfillPolyfill是一种用于填补不同浏览器功能缺失的JavaScript库。

解决IE11浏览器网页不兼容的两个方法

解决IE11浏览器网页不兼容的两个方法

一、关闭保护模式
1.打开IE11浏览器,点击右上角的工具选项,再选择Internet选项;
2.点击界面的上方的安全选项卡,然后点击Internet;
3.把启用保护模式的勾选去掉,另外,切换到高级选项卡,找到增强保护模式,如果前面有勾选并可选的话,请您将前面的勾去掉;
4.关闭IE11浏览器,重新登入。

二、禁用GPU硬件加速
如果用户的电脑是没有独立显卡的老机器,在用IE11观看优酷之类的在线视频时,会出现切换为全屏模式后当前视频就自动关闭的异常状况。

这是由于用户的集成显卡不支持硬件加速导致的,只要将当前的Flashplayer播放插件卸载,并安装10.2及以下版本即可解决。

此外,如果用户并不想在以后升级自己电脑,在进行下面的操作:
1.打开IE,点击右上角的工具选项,再选择Internet选项;
2.点击界面的上方的安全选项卡,然后点击Internet;
3.把启用保护模式的勾选去掉,另外,切换到高级选项卡,找到使用软件呈现而不使用GPU呈现选项,如果前面有勾选并可选的话,请您将前面的勾去掉;
4.关闭IE,重新打开该网站
另外,如果您的设备曾经装载过或正在使用第三方的防毒软件,建议您可以进行卸载或停用的操作,看问题是否得到改善。

win10系统解决IE11浏览器兼容性

win10系统解决IE11浏览器兼容性

win10系统解决IE11浏览器兼容性
关于win10系统解决IE11浏览器兼容性
方法一:添加受信任的站点
首先打开IE浏览器,点击工具中的`Internet选项。

切换到安全标签中,点击受信任的站点。

然后点击站点,添加该行的站点。

方法二:关闭保护模式
打开IE浏览器,点击工具选项中的Internet选项。

切换到安全标签中点击Internet。

把启用保护模式的勾取消掉,然后在高级标签中找到增强保护模式,把它的勾一并取消掉。

方法三:添加兼容性试图设置
打开浏览器,点击工具中的兼容性视图设置。

然后把该网站添加到“兼容性视图中的网站”,重启浏览器即可。

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

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

浏览器兼容性问题解决方法一、HA CK以下两种方法几乎能解决现今所有HACK。

1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对火狐*+html 与*html 是IE特有的标签, 火狐暂不支持.而*+html 又为IE7特有标签.<style>#wrapper{#wrapper { width: 120px; } /* 火狐 */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */}</style>注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">二、万能float 闭合关于clear float 的原理可参见[How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.<style>/* Clear Fix */.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>三、其他兼容技巧1, FF下给div 设置padding 后会导致width 和height 增加, 但IE不会.(可用!important解决)2, 居中问题.垂直居中.将line-height 设置为当前div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.)水平居中. margin: 0 auto;(当然不是万能)3, 若需给a 标签内内容加上样式, 需要设置display: block;(常见于导航标签)4, FF 和IE 对BOX 理解的差异导致相差2px 的还有设为float的div在ie下margin加倍等问题.5, ul 标签在FF 下面默认有list-style 和padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部wrapper 的div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于IE.四、部分样式兼容技巧1 针对火狐ie6 ie7的css样式现在大部分都是用!important来hack,对于ie6和火狐测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack 方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

最全整理浏览器兼容性问题与解决方案

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。

在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。

某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。

稍有改动就乱七八糟。

代码为什么这么写还不知所以然。

这类开发人员往往经常为兼容性问题所困。

修改好了这个浏览器又乱了另一个浏览器。

改来改去也毫无头绪。

其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题。

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding 差异较大。

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

浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)解决方案:在float的标签样式控制中加入display:inline;将其转化为行内属性备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

浏览器不兼容原因及解决方案

浏览器不兼容原因及解决方案

浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6。

0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是 CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS,最大化兼容浏览器。

一般情况下,我都会兼顾IE 6。

0 / IE 7.0 / firefox 2。

0浏览器,下面是用的较频繁的CSS Hack技巧:用的最广莫过于!important了,它可以针对IE(IE 7。

0能正确理解!important)和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important,就可以针对其优先了。

所以为了兼顾IE 6。

0与火狐之间的差异,我都会使用!important。

1、仅IE7与IE5。

0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

2、仅IE7可以识别*+html select {…!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

3、IE6及IE6以下识别* html select {…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别。

4、html/**/ >body select {…}这句与上一句的作用相同。

5、仅IE6不识别,屏蔽IE6select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

6、仅IE6与IE5不识别,屏蔽IE6与IE5select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

关于浏览器兼容问题的解决办法,全部都在这里了

关于浏览器兼容问题的解决办法,全部都在这里了

关于浏览器兼容问题的解决办法,全部都在这⾥了⽬前,最为流⾏的浏览器共有五个:分别是ie,Edge浏览器(属于微软),⽕狐,⾕歌(chrome)Safari和Opera五⼤浏览器。

这五⼤浏览器分别有各⾃的浏览器内核,下⾯介绍以下各个浏览器的内核(包括⼀些国内的浏览器):Trident内核:IE ,360,,猎豹,百度;Gecko内核:⽕狐----------->这个浏览器内核是开源的浏览器内核,插件⾮常多,-------------->缺点:打开速度慢(加载flash插件)<-----额外介绍----->。

Webkit:遨游,苹果,symbian;Bink:chrome浏览器,⼤部分国产浏览器最新版本都采⽤Blink;由于这些浏览器的内核不相同,因此,他们的对编辑页⾯的⼀些属性的⽀持也有所不同,接下来,我就谈⼀谈在解决浏览器兼容⽅⾯的见解:⾸先是关于innerText和textContent的问题的见解:innerText ⾕歌,⽕狐和IE8都⽀持低版本的⽕狐不⽀持innerTexttextContent在IE8中的结果是undefined;textContent在⾕歌和⽕狐中⽀持;这些内容是必须知道的,也是以后解决兼容性问题的引⼦或者思路,同时也是基础。

在解决浏览器兼容性的问题上⾯,⾸先,可以通过获取浏览器的版本来判断这个浏览器是不是⽀持这个属性,但是这种办法⾮常的⿇烦。

具体做法是:我要在⼀系列的信息中找到这个浏览器版本⾥⾯的具体是什么样的,然后⽤正则表达式去匹配,然后确定这个浏览器⾥⾯具体⽤的什么东西。

这就是整个的内容,所以,相当的⿇烦。

当然,获取浏览器版本的代码很简单,就⼀句话,⼀⾏代码,但是仅仅是为了判断这个浏览器是不是⽀持这个属性,是不是放在这⾥好像有点⼉⼤材⼩⽤了。

因此,就直接判断这个浏览器⾥⾯是不是⽀持这个属性就可以了。

为了解决这个不兼容的问题,我们可以编辑以下代码来解决上述问题:1//任意元素都可以设置成⽂本内容----------因此把“任意”元素当成对象(element)传递到函数中23//element---->任意元素4//text--->任意⽂本内容5function setInnerText(element,text) {6if(typeof (element.textContent)=='undefined'){//是IE8浏览器7 element.innerText=text;8 }else{9//浏览器⽀持textContent这个属性10 element.textContent=text;11 }12 }131415//获取任意元素中的⽂本内容16function getInnerText(element) {17if(typeof (element.textContent)=="undefined"){18//如果浏览器不⽀持textContext这个属性则返回innerText的值19return element.innerText;20 }else{21//如果浏览器⽀持textContext属性,则直接返回该属性的值22return element.textContent;23 }24 }上述代码就可以解决innnerText和textContent在各个浏览器之间不兼容的问题(上述代码⽬前只在⾕歌,⽕狐,IE8版本上⾯测试,以后还会在其他的浏览器的不同版本上⾯测试,测试结果还会不断的更新,尽请期待)。

浏览器不兼容的解决方法

浏览器不兼容的解决方法

浏览器不兼容的解决方法
浏览器不兼容的现象:
1、输入证号后,点击查询没有反映,无法选择家庭成员。

2、数据查询模块,点查询没有反映,查不到任何数据。

3、日期无法选择,或某些按钮点击没有反映等等。

解决方法:
1、如果是ie浏览器,在工具里面有兼容性视图设置,点一下即可。

或者点击兼容性视图设置,将农合系统的网址添加到兼容性视图中,再点击关闭!
有些客户反映找不到工具,是因为浏览器隐藏了菜单栏。

将鼠标放到菜单栏位置点击右键,勾选菜单栏即可。

2、如果是360或者其他的浏览器,则在地址栏最右边有个极速模式和兼容模式的切换按钮,点击切换到兼容模式即可。

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

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

浏览器兼容性问题解决方法一、HACK以下两种方法几乎能解决现今所有HACK。

1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对火狐*+html 与 *html 是IE特有的标签, 火狐暂不支持.而*+html 又为 IE7特有标签.<style>#wrapper{#wrapper { width: 120px; } /* 火狐*/*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/}</style>注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.<style>/* Clear Fix */.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)2, 居中问题.➢垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.)➢水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.四、部分样式兼容技巧1 针对火狐 ie6 ie7的css样式现在大部分都是用!important来hack,对于ie6和火狐测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点。

1、DOCTYPE 影响CSS 处理2、FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行3、FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4、FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width5、FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。

缺点是要控制内容不要换行7、cursor: pointer 可以同时在IE FF 中显示游标手指状,hand 仅IE 可以8、FF: 链接加边框和背景色,需设置display: block, 同时设置float: left 保证不换行。

参照menubar, 给a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。

9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。

所以在IE下其实解释成这样:div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;10、IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。

这时我们可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)11、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题注意事项:1、float的div一定要闭合。

例如:(其中floatA、floatB的属性已经设置为float:left;)<#div id=\”floatA\”><#div id=\”floatB\”><#div id=\”NOTfloatC\”>这里的NOTfloatC并不希望继续平移,而是希望往下排。

这段代码在IE中毫无问题,问题出在FF。

原因是NOTfloatC并非float标签,必须将float标签闭合。

在<#div class=\”floatB\”><#div class=\”NOTfloatC\”>之间加上<#div class=\”clear\”>这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。

并且将clear这种样式定义为如下即可:.clear{clear:both;}此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。

例如某一个wrapper如下定义:.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;例如:<#div id=\”imfloat\”>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3、关于容器的包涵关系很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。

在IE中,外层的宽度会被内层更宽的div挤破。

一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题如果是动态地添加内容,高度最好不要定义。

浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。

(似乎有时候不会自动往下撑开,不知道具体怎么回事)5、最狠的手段- !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE 则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过;IE7.0出来了,对CSS的支持又有新问题。

浏览器多了,网页兼容性更差了,疲于奔命的还是我们,为解决IE7.0的兼容问题,找来了下面这篇文章:现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important 可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。

---------------------------------------------------------------------------------------------------------------------------------先温习一下对于IE的box-model的破解IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作Quotediv.content {width:400px; //这个是错误的width,所有浏览器都读到了voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容voice-family:inherit;width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的}html>body .content { //html>body是CSS2的写法width:300px; //支持CSS2该写法的浏览器有幸读到了这一句}现在回到主题,我们经常看到!important和(空格)/**/:组合在一起使用,这个写法有什么奥妙呢?看刚才那个写法,我这里可以提供另一种写法也能达到这样的效果Quotediv.content {width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win 读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用}html>body .content { //html>body是CSS2的写法width:300px; //支持CSS2该写法的浏览器有幸读到了这一句}同样,这个方法仍必须依靠正确的文档类型声明才能够正常工作,原因在前面已经说过。

文档类型声明就像一个开关,打开向后兼容的未来,而错误使用的话,就是一个Pandora box---------------------------------------------------------------------------------------------------------------ie7.0的面世,尚且不论他是否较之ie6.0进步,ie7和ie6 之间不兼容,毫无疑问又引入了新的痛处,至少在调试的过程中,又多了一道程序以及随之而来的大量不兼容。

目前,使用ie7.0的用户尚且是少数,使用ie6.0的用户仍然占据很大的比重。

相关文档
最新文档