史上最全的浏览器兼容性问题和解决方案

关键词：

浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一的情况。一般情况下，我们希望用户无论使用什么浏览器来查看网页效果都应该是一样的。浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。下面PHP程序员雷雪松整理出来了史上最全的浏览器兼容性问题和解决方案。

一、浏览器兼容性问题总结

1、双倍浮动边距：
原因：多个并列浮动元素设置了左或右边界值（x），ie6下第一个浮动元素的左或右的边界值为2倍(2x);
解决：为第一个浮动元素添加display:inline;样式；

2、高度不能自适应：
原因：多个并列浮动元素的父级高度不能被撑开。
解决：在最后一个浮动元素后添加<div class=”clear”></div> .clear clear:both;

3、上下边界不被识别：
原因：父级元素未指定高度，margin-top和margin-bottom解析错误
解决：在该元素的父一级元素上添加样式：overflow:auto; display:inline-block;
备注：当元素被设置成inline-block时候，最后给该元素指定宽度；

4、IE6不识别微型高度：
原因：IE6不能识别低于当前字高的高度
解决：为该元素设置font-size:0 / overflow:hidden;

5、IE6链接伪类的问题：
原因：IE6不识别P:hover,只能识别a:hover
解决：用a:hover替换之。

6、IE6、7阶梯列表问题：
原因：浮动元素未指定宽度；
解决：为浮动元素指定确定宽度

二、兼容（HACK）技术

1、属性过滤：

1 2 3 4 5

#nav  _margin:100px; /*只IE6识别*/ *margin:100px; /*只IE6、IE7识别*/ margin:100px\\0/; /*只IE8识别*/

2、选择器过滤：

1 2 3 4 5 6 7 8 9 10

* html #nav margin:10px; border:1px #f00 solid; /*仅IE6识别*/ *+html #nav margin:100px; border:1px #f00 solid; /*仅IE7识别*/ /*针对Firefox*/ @-moz-document url-prefix() #nav width:200px;  /*针对Safari & Chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) #nav width:300px;

备注：关于Chrome中文版12号以下的字体不识别，解决方案，设置样式如下：

1 2 3 4 5

html -webkit-text-size-adjust:none; /*针对Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) #nav width:400px;

3、样式表过滤

1 2 3 4 5 6

<!--[if ie 6]> 仅ie6识别的html <![endif]--> <!--[if lt ie 6]> 小于ie6识别的html <![endif]--> <!--[if gt ie 6]> 大于ie6识别的html <![endif]--> <!--[if ie]> 仅ie识别的html <![endif]--> <!--[if lte ie 6]> 小于等于ie6识别的html <![endif]--> <!--[if gte ie 6]> 大于等于ie6识别的html <![endif]-->

三、注意事项

记得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素尽量给一个确定的宽度。
尽量使用padding代替margin。
若同时有float及margin，加入display:inline。
尽量避免使用绝对定位进行布局；若使用，需明确指定z-index, top, left；
尽量避免使用半透明png图片(PNG-24)；若使用，用PNG修复补丁修复之；
若出现宽度被撑开现象，设置overflow:hidden;
若出现莫名padding，设置font-size:0及overflow:hidden;

四、其他技巧

1、FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2、 居中问题.
a).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
b).水平居中. 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.

史上最全的csshack方式一览（转）

...端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，... 查看详情

html5的audio，audio.play()在手机浏览器中不能自动播放

...audio，audio.play();在pc里面是可以自动播放的，但是在手机浏览器里面却不行。据说是因为：IOS和安卓4.4+由于安全原因，禁用了这一功能，只能通过用户点击才能播放。那么，如何能解决这个问题呢？你好，建议你换手机QQ浏览器... 查看详情

最全的css浏览器兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,... 查看详情

史上最全canopenurl:failed问题解决办法

参考技术A史上最全canOpenURL:failed问题解决办法由于苹果在IOS9.0开始规定在App中使用Https协议与服务器进行数据交互，导致很多原本正常的功能，莫名的就崩掉了。查看控制台就会看到各种错误提示，例如：-canOpenURL:failedforURL:"... 查看详情

史上最全android性能优化方案解析

Android中的性能优分为以下几个方面：布局优化网络优化安装包优化内存优化卡顿优化启动优化……一.布局优化布局优化的本质就是减少View的层级。常见的布局优化方案如下：在LinearLayout和RelativeLayout都可以完成布局的情... 查看详情

史上最全android性能优化方案解析

Android中的性能优分为以下几个方面：布局优化网络优化安装包优化内存优化卡顿优化启动优化……一.布局优化布局优化的本质就是减少View的层级。常见的布局优化方案如下：在LinearLayout和RelativeLayout都可以完成布局的情... 查看详情

史上最全的csshack方式一览

转自：什么是CSShack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果... 查看详情

收藏史上最全的浏览器css&jshack手册

浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是IE）也有差异。因此，浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器Hack手册，那查询起来就方便多了。这篇文章就向大家分享&... 查看详情

史上最全的变量作用域和内存问题

（一）JavaScript变量能够用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自下面5种基本数据类型：Undefined、Null、Boolean、Number和String。基本类型值和引用类型值具有下面特点：1.基本类型值在内存中占领固定大... 查看详情

史上最全的变量作用域和内存问题

（一）JavaScript变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下5种基本数据类型：Undefined、Null、Boolean、Number和String。基本类型值和引用类型值具有以下特点：1.基本类型值在内存中占据固定大... 查看详情

史上最全cocoapods安装及问题解决(代码片段)

前言近期由于入手一台iMac，要重新配置许多东西，众所周知cocoaPods是iOS开发的利器，废话不多说，下面开始安装吧。a.使用RVM对Ruby进行升级先查看现在的Ruby版本号输入命令：ruby-v安装RVMRVM：RubyVersionManager&... 查看详情

浏览器的工作原理你真的全知道嘛?史上最全图解其原理(代码片段)

可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入url到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我... 查看详情

浏览器的工作原理你真的全知道嘛?史上最全图解其原理(代码片段)

可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入url到页面展现的短短几秒内浏览器究竟做了什么；我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用；我... 查看详情

史上最全详解微服务技术栈

...务技术栈课程|黑马程序员Java微服务_  课程大纲 微服务解决方案分布式事务解决方案：我们会基于Seata框架来学习四种不同的分布式事务方案：•XA模 查看详情

史上最全的开发和设计资源大全

 史上最全的开发和设计资源大全2016-08-09 技术最前线链接：blog.jobbole.com/104313GitHub 上的 Awesome 系列（资源大全系列），是一个汇总了优秀工具资源的大集合，并由 GitHub 社区用户持续维护和更新。初始... 查看详情

二.史上最全charles抓包（青花瓷）使用教程

...是否允许xxxxx-------点击Allow同意C.根据提示，在手机Safari浏览器输入地址chls.pro/sslD.安装证书E.信任证书路径：通用--->关于本机---->证书信任设置路径：proxy--->sslproxyingsettings原因：证书没有完全信任解决问题：A.证书是否安... 查看详情

操作系统面试题（史上最全持续更新）(代码片段)

...程序，如字处理程序、电子制表软件、编译器、网络浏览器等，规定了按何种方式使用这些资源来解决用户的计算问题。操作系统控制和协调各用户的应用程序对硬件的使用。综上所述，操作系统是指控制和管理整个... 查看详情

挂载文件系统出现"kernelpanic..."史上最全解决方案

　　问：挂载自己制作的文件系统卡在这里：　　　　NET:Registeredprotocolfamily1　　　　NET:Registeredprotocolfamily17　　　　VFS:Mountedroot(cramfsfilesystem)readonly.　　　　Freeinginitmemory:116K　　　　Failedtoexecute/linuxrc.Attemptingdef 查看详情