最全整理浏览器兼容性问题与解决方案
浏览器兼容性的解决方法
浏览器兼容性的解决方法随着互联网的不断发展，浏览器也得到了越来越多的重要性。
从最初的简单浏览功能到现在的多样化应用，浏览器正变得越来越重要。
但是，不同的浏览器有不同的协议和语言，可能会导致网页在不同的浏览器中显示不同的效果。
所以我们需要解决浏览器兼容性问题。
浏览器兼容性问题浏览器兼容性问题是在不同的浏览器中显示不一致的问题，有时候还会出现网页无法正常显示的问题。
这是因为每个浏览器都有各自的实现标准和处理方式，而网页制作人员通常只考虑一种浏览器，没有考虑到其他浏览器访问自己的网站，导致了这种兼容性问题。
实际上，在网站开发的过程中，应该优先考虑多种浏览器，尤其是Internet Explorer和Firefox在不同版本之间的差异。
这样才能让网站在不同的环境下，不同的浏览器和不同的操作系统下都能完美的运行。
解决浏览器兼容性问题虽然不同的浏览器有不同的实现标准，但是我们可以采用一些措施来解决这种浏览器兼容性问题。
1.使用标准的HTML/CSS/Javascript遵循HTML、CSS和JavaScript的标准，是解决浏览器兼容性问题的基础。
这样的编写方式通常可以使网站在大多数浏览器中运行良好。
如果您尝试按照标准编写只能在一种浏览器中工作的网页，那么它就不会在其他浏览器上工作良好。
所以，标准的HTML/CSS/Javascript是解决浏览器兼容性问题的关键。
2.使用CSS Reset在CSS Reset中，使用过CSS的开发者可能都有过这样的经历：每种浏览器都默认有自己的样式表文件，这就是为什么某些元素在设计页面时会出现各种奇怪的问题。
CSS Reset 的目的就是将所有浏览器的默认样式表重置，以达到统一的目的，从而减少浏览器兼容性问题。
3.使用BootstrapBootstrap是一个开源的前端框架，它包含众多基于HTML、CSS和JavaScript的组件，可以快速构建一个响应式、移动优先的网站。
浏览器兼容性问题大汇总
浏览器兼容性问题⼤汇总JavaScript1.HTML对象获取问题FireFox：document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法：统⼀使⽤document.getElementById(“idName”);2.const问题说明:Firefox下,可以使⽤const关键字或var关键字来定义常量;IE下,只能使⽤var关键字来定义常量.解决⽅法：统⼀使⽤var关键字来定义常量.3.event.x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决⽅法：使⽤mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.4.window.location.href问题说明:IE或者Firefox2.0.x下,可以使⽤window.location或window.location.href;Firefox1.5.x下,只能使⽤window.location.解决⽅法：使⽤window.location来代替window.location.href.5.frame问题以下⾯的frame为例：<frame src=”xxx.html” id=”frameId” name=”frameName” />(1)访问frame对象：IE:使⽤window.frameId或者window.frameName来访问这个frame对象.frameId和frameName可以同名。
Firefox:只能使⽤window.frameName来访问这个frame对象.另外，在IE和Firefox中都可以使⽤window.document.getElementById(“frameId”)来访问这个frame对象.(2)切换frame内容:在 IE和Firefox中都可以使⽤window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.如果需要将frame中的参数传回⽗窗⼝(注意不是opener,⽽是parent frame)，可以在frame中使⽤parent来访问⽗窗⼝。
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即可。
浏览器不兼容问题解决方案
浏览器不兼容原因及解决办法浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。
在下不才，归纳几点html编码要素，望能指点各位：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.<di v style=”border:1px solid red;height:10px”></div>b.<div style=”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一起使用。
在IE和火狐浏览器下页面兼容性问题的处理(最完整篇)
最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS处理,作为W3C的标准,一定要加 DOCTYPE声名.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:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:00 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block;//可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果diplay:table;4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
浏览器兼容性问题解决方案汇总
浏览器兼容性问题解决方案汇总浏览器兼容性问题解决方案汇总【来源：小鸟云计算】Ps.小鸟云，国内专业的云计算服务商普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。
俗话说：没有IE就没有伤害。
贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。
Normalize.css不同浏览器的默认样式存在差异，可以使用Normalize.css 抹平这些差异。
当然，你也可以定制属于自己业务的reset.css <="" bdsfid="71" href="https:///normalize/7.0.0/normalize.min.c ss" p=""/>rel="stylesheet">简单粗暴法* { margin: 0; padding: 0; }html5shiv.js解决ie9 以下浏览器对html5 新增标签不识别的问题。
respond.js解决ie9 以下浏览器不支持CSS3 Media Query 的问题。
picturefill.js解决IE 9 10 11 等浏览器不支持标签的问题IE 条件注释IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效IE 属性过滤器（较为常用的hack方法）针对不同的IE 浏览器，可以使用不同的字符来对特定的版本的IE 浏览器进行样式控制imageimage浏览器CSS 兼容前缀-o-transform:rotate(7deg); // Opera-ms-transform:rotate(7deg); // IE-moz-transform:rotate(7deg); // Firefox-webkit-transform:rotate(7deg); // Chrometransform:rotate(7deg); // 统一标识语句a 标签的几种CSS 状态的顺序很多新人在写a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
解决跨浏览器兼容性问题的技巧
解决跨浏览器兼容性问题的技巧在开发网站和应用程序时，跨浏览器兼容性问题是一个常见的挑战。
不同的浏览器有自己的特性和实现方式，因此相同的代码在不同的浏览器上可能会有不同的效果。
在本文中，我们将探讨一些解决跨浏览器兼容性问题的技巧。
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.知识更新和研究：跨浏览器兼容性问题是一个不断变化的领域。
最全整理浏览器兼容性问题与项目解决方案
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需，无论用户用什么浏览器来查看我们的或者登陆我们的系统，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到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 实现，这就是一个必然会碰到的兼容性问题。
常见浏览器兼容问题处理办法
常见浏览器兼容处理办法希望以兼容模式打开<metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染--><metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染-->EDGE 以最接近的新版本<metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">Js判断浏览器类型：浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的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 小于你设置的高度。
浏览器兼容性大全
浏览器兼容性浏览器的内核Mozilla Firefox ( Gecko )Internet Explorer ( Trident )Opera ( Presto )Safari ( WebKit )Google Chrome ( WebKit )腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。
搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。
解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8一读到这个标签,它就会自动启动IE7兼容模式CSS Hack解决浏览器兼容性问题的主要方法是CSS hack。
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。
我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox 两个都不能认识。
前端开发中的浏览器兼容性问题解决方案
前端开发中的浏览器兼容性问题解决方案在当前互联网时代，前端开发成为了一项必不可少的技能。
然而，随之而来的浏览器兼容性问题不可忽视。
不同的浏览器对于网页的解析方式和显示效果存在差异，因此，如何解决浏览器兼容性问题成为了前端开发人员面临的一大挑战。
本文将介绍一些解决方案，帮助开发人员应对这一问题。
一、使用CSS ResetCSS Reset是一种在网页中重置浏览器默认样式的技术。
浏览器的默认样式往往存在差异，使得网页在不同浏览器中显示效果不一致。
通过使用CSS Reset，开发人员可以将不同浏览器的默认样式统一为相同的基准样式，从而避免兼容性问题。
二、采用流式布局流式布局是一种自适应的网页布局方式，可以让网页内容根据浏览器窗口的大小自动调整。
相比固定布局，流式布局可以更好地适应不同浏览器分辨率的要求，从而提高浏览器兼容性。
三、选择合适的前缀在CSS中，一些属性需要添加浏览器前缀才能正常工作。
不同浏览器对于前缀的支持度存在差异，因此，开发人员需要根据浏览器的不同添加对应的前缀。
可以通过工具或者在线服务帮助自动生成带有浏览器前缀的CSS代码，简化开发人员的工作量。
四、使用PolyfillPolyfill是一种为旧版本浏览器提供新特性支持的技术。
通过使用Polyfill，开发人员可以在不支持某些新特性的浏览器中引入相应的JavaScript代码，实现类似的功能。
这样一来，无需为不同浏览器编写不同的代码，可以提高代码的可维护性和兼容性。
五、测试和调试在开发过程中，及时进行测试和调试非常重要。
可以借助浏览器的开发者工具进行调试，查看网页在不同浏览器中的显示效果，并进行必要的修复和优化。
同时，还可以利用在线兼容性测试工具，对网页在不同浏览器中的兼容性进行全面的测试。
六、参考文档和社区支持前端开发领域有很多相关的参考文档和社区，可以帮助开发人员解决浏览器兼容性问题。
开发人员可以通过查阅相关文档，了解不同浏览器的兼容性情况和解决方案。
常见浏览器之间的兼容性解决办法
总宽度 = margin-left + width + margin-right
更多的细节，请参考这个链接：Internet Explorer和CSS盒模型详细解释
解决方法：
使用w3c的标准兼容模式。IE6或者之后的版本能基于w3c的标准计算，但是你仍旧会在IE5中遇到问题。
对此有许多解决方法，但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法)。所以我使用了hack。在原文本之后增加空格看起来能解决这个问题。
但是，从 Hippy Tech Blog 那里了解到，问题背后的原因是由于html注释标签。IE6不能正确的渲染它。下面是他建议的解决方案列表：
பைடு நூலகம்
解决方法：
img { -ms-interpolation-mode: bicubic; }
5、 PNG透明(PNG Transparency)
我猜每个人都知道这个，但我仍把它列在这里，作为以后的参考。
所以如果你想要使用透明图像并且GIF不能给你想要的质量，你会需要这个对PNG的hack。你必须意识到，如果你使用一张PNG图像作为背景，你将不能设置背景的位置。
这个问题我遇到过很多次，当时我正在准备一个JQuery的教程，因为我使用了很多overflow hidden来达到我想要的布局。
问题发生在当父元素的overflow被设置成hidden并且子元素被设置成position:relative。
CSS-Trick有一个很好的例子来演示这个bug。position:relative and overflow in internet explorer
解决方法：
浏览器兼容性解决方案
所有浏览器通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
好吧，我服了行吧，那我就利用你们的不兼容各写一段css,让他们各执行各的，呵呵。
一、!important (功能有限)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */}二、CSS HACK的方法(新手可以看看，高手就当路过吧) 首先需要知道的是：所有浏览器通用 height: 100px;IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、IE7 共用 *height: 100px;IE7、FF 共用 height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下面的这种方法比较简单举几个例子：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个用上面说的第一种方法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。
46种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总Ø JavaScript 31. HTML对象获取问题32. const问题33. event.x与event.y问题34. window.location.href问题35. frame问题36. 模态和非模态窗口问题37. firefox与IE的父元素(parentElement)的区别38. document.formName.item(”itemName”) 问题39. 集合类对象问题310. 自定义属性问题311. input.type属性问题312. event.srcElement问题313. body载入问题314. 事件委托方法315. Table操作问题316. 对象宽高赋值问题3Ø CSS 31. cursor:hand VS cursor:pointer 32. innerText在IE中能正常工作，但在FireFox中却不行. 33. CSS透明34. css中的width和padding 35. FF和IE BOX模型解释不一致导致相差2px 36. IE5 和IE6的BOX解释不一致37. ul和ol列表缩进问题38. 元素水平居中问题39. Div的垂直居中问题310. margin加倍的问题311. IE与宽度和高度的问题312. 页面的最小宽度313. DIV浮动IE文本产生3象素的bug 314. IE捉迷藏的问题315. float的div闭合;清除浮动;自适应高度316. 高度不适应317. IE6下图片下有空隙产生318. 对齐文本与文本输入框319. LI中内容超过长度后以省略号显示320. 为什么web标准中IE无法设置滚动条颜色了321. 为什么无法定义1px左右高度的容器322. 链接(a标签)的边框与背景323. 超链接访问过后hover样式就不出现的问题324. FORM标签325. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 326. 为什么FF下文本无法撑开容器的高度3Ø JavaScript1. HTML对象获取问题FireFox：document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法：统一使用document.getElementById("idName");2. const问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法：统一使用var关键字来定义常量.3. event.x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.4. window.location.href问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.解决方法：使用window.location来代替window.location.href.5. frame问题以下面的frame为例：<frame src="xxx.html" id="frameId" name="frameName" />(1)访问frame对象:IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
四招轻松解决Win10系统IE11兼容性问题教程
四招轻松解决Win10系统IE11兼容性问题教程IE11是IE最高版本的浏览器，也可能是XXX最后一个版本的IE浏览器啦，在Win10系统系统中作为备用浏览器得以保留。
目前使用IE11的使用者数量已超越IE10和IE9的总数。
虽然IE11有许多优点，但是在浏览一些网站的时候还是会出现一些兼容性的问题，比如看视频绿屏的问题你有没有遇到过？如果想要更为流畅的运行IE11浏览器的话，接下来提供的方法不仅适用于Windows10，对于Win7/Win8/Win8.1下的IE11同样可用。
当遇到打开有问题的网站，可以尝试接下来的操作：一、添加受信任的站点1.打开IE11浏览器，点击右上角的“工具”选项，再选择“Internet选项”；2.点击界面的上方的“安全”选项卡，然后点击“受信任的站点”；3.点击“站点”，添加该行的网站。
二、添加兼容性视图设置1.翻开IE11浏览器，点击右上角的“工具”选项，再选择“兼容性视图设置”；2.将该行网站添加到“兼容性视图中的网站”；3.关闭IE11浏览器，重新登入。
三、关闭保护模式1.翻开IE11浏览器，点击右上角的“工具”选项，再选择“I nternet选项”；2.点击界面的上方的“平安”选项卡，然后点击“Internet”；3.把“启用保护模式”的勾选去掉，另外，切换到“高级”选项卡，找到“增强保护模式”，如果前面有勾选并可选的话，请您将前面的勾去掉；4.关闭IE11浏览器，重新登入。
四、禁用GPU硬件加速如果使用者的电脑是没有独立显卡的老机器，在用IE11观看优酷之类的在线视频时，会出现切换为全屏模式后当前视频就自动关闭的异常状况。
这是由于使用者的集成显卡不支持硬件加速导致的，只要将当前的Flashplayer播放插件卸载，并安装10.2及以下版本即可处理。
此外，如果使用者并不想在以后升级自己电脑，在进行接下来的操作：1.打开IE，点击右上角的“工具”选项，再选择“Internet选项”；2.点击界面的上方的“安全”选项卡，然后点击“Internet”；3.把“启用保护模式”的勾选去掉，另外，切换到“高级”选项卡，找到“使用软件出现而不使用GPU出现”选项，如果前面有勾选并可选的话，请您将前面的勾去掉；4.关闭IE，重新打开该网站。
浏览器兼容性问题汇总_web前端_html_css
一、兼容性问题：1、div的垂直居中问题： vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行。
2、margin加倍的问题：设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;例如： <div id=”imfloat”></div> 相应的css为#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果 display:table。
3、IE与宽度和高度的问题： IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：#box{ width: 80px; height: 35px;} html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
浏览器兼容性问题解决方法
浏览器兼容性问题解决方法一、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浏览一下，应该没有问题了。
常见浏览器不兼容现象及解决方案-网页设计论文-计算机论文
常见浏览器不兼容现象及解决方案-网页设计论文-计算机论文——文章均为WORD文档，下载后可直接编辑使用亦可打印——1 引言当前打开网页有许多不同类型或版本的浏览器，从W3C标准（World Wide Web Consortium,万维网联盟）的角度来说，浏览器可分为两大类：一类为非标准型，如IE7及以下版本浏览器；另一类为标准型，如IE8和非IE浏览器。
我们在浏览同一个页面时，若采用不同的浏览器时，打开网页的效果有可能不相同，会产生不同的显示效果。
产生此种情况的原因就是浏览器不兼容的问题。
所谓的浏览器兼容问题，是指当我们使用不同的浏览器对同一个页面进行访问时，造成页面显示效果不一致的情况。
出现这种现象的原因很多，但根本原因就是浏览器对技术支持的标准不同所造成的。
当某个页面不兼容时，多因为它无法兼容标准浏览器，仅支持及IE7以下版本类型的浏览器。
IE浏览器对CSS的支持是很不标准的，对网页布局存在很多问题，主要表现在两个方面：一是IE支持某种技术或功能，但实现该功能的方法和途径与标准不同；二是IE浏览器自身的解析机制存在着许多Bug,导致页面解析效果与标准不同。
2常见浏览器不兼容现象在网页设计中，碰到浏览器不兼容的现象很多，主要下面几种：（1）设置较小高度标签，在IE6、IE7等浏览器中显示出高度不受控制，超出设置高度；（2）图片默认间距问题，几个img标签放在一起时，部分浏览器会有默认的间距；（3）不同浏览器标签默认的外补丁和内补丁不同，不加样式控制的情况下，各自的margin和padding差异较大；（4）有序列表高度问题，表现为列表序号显示无效，主要存在于非标准的IE浏览器中，而标准浏览器不在于该问题；（5）列表宽度问题，主要存在于IE及以下版本的浏览器中，给列表框定义一个宽度时，在IE和非IE中的显示显示效果是不一样的；（6）标签最低高度设置min-height不兼容，由于min-height本身是一个不兼容的CSS属性一，所以设置它时不能被各浏览器兼容；（7）列表项错行问题，当为列表项嵌套块状元素，如div、p等元素且设置项目符号在内部显示时，非IE和IE浏览器在解析时会出现错行问题。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到 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 实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于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 布局备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img标签之间会有个间距。
去掉这个间距使用 float 是正道。
（我的一个学生使用负 margin，虽然能解决，但负 margin 本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）浏览器兼容问题六：标签最低高度设置 min-height 不兼容问题症状：因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容碰到几率： 5%解决方案：如果我们要设置一个标签的最小高度 200px，需要进行的设置为：{min-height:200px; height:auto ! ImportAnt ; height:200px; overflow:visible;}备注：在 B/S 系统前端开时，有很多情况下我们又这种需求。
当内容小于一个值（如 300px）时。
容器的高度为 300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。
这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容 CSS 设置做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。
建议经常会碰到兼容性问题的新手使用。
很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
1. /* CSS hack*/我很少使用 hacker的，可能是个人习惯吧，我不喜欢写的代码 IE 不兼容，然后用hack 来解决。
不过 hacker 还是非常好用的。
使用 hacker 我可以把浏览器分为 3 类：IE6 ；IE7 和遨游；其他（IE8 Chrome ff Safari opera等）◆IE6 认识的 hacker 是下划线 _ 和星号 *◆ IE7 遨游认识的 hacker 是星号 *比如这样一个 CSS 设置：1. height:300px;*height:200px;_height:100px;IE6 浏览器在读到 height:300px 的时候会认为高时 300px；继续往下读，他也认识*heihgt ，所以当 IE6 读到 *height:200px 的时候会覆盖掉前一条的相冲突设置，认为高度是 200px。
继续往下读， IE6 还认识_height,所以他又会覆盖掉 200px 高的设置，把高度设置为 100px；IE7和遨游也是一样的从高度 300px的设置往下读。
当它们读到*height200px 的时候就停下了，因为它们不认识 _height。
所以它们会把高度解析为 200px，剩下的浏览器只认识第一个 height:300px;所以他们会把高度解析为 300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
在网站设计的时候，应该注意css 样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF 对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px;IE6 专用height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7 、FF 共用height: 100px !important;一、CSS 兼容以下两种方法几乎能解决现今所有兼容随着IE7 对!important 的支持, !important 方法现在只针对IE6 的兼容.（注意写法. 记得该声明位置需要提前.）代码:<style>#wrapper {width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77 对FireFox <from 针对firefox ie6 ie7 的css 样式> *+html 与*html 是IE 特有的标签, firefox 暂不支持. 而*+html 又为IE7 特有标签.代码:<style>#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/</style>注意:代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">关于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, 居中问题.1）. 垂直居中.将line-height 设置为当前div 相同的高度, 再通过vetical-align: middle.（注意内容不要换行.）2）. 水平居中. 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. 贴上代码:兼容代码: 兼容最推荐的模式/* FF */.submitbutton {float:left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;}/* IE6 */*html .submitbutton {margin-top: 21px;}/* IE7 */*+html .submitbutton { margin-top: 21px;}什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6 ）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。