浏览器兼容性

时间 2019-11-24

原文原文链接

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各类浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制做中，作好浏览器兼容，才可以让网站在不一样的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容可以给用户更好的使用体验。

1产生缘由

由于不一样浏览器使用内核及所支持的HTML等网页语言标准不一样；以及用户客户端的环境不一样（如分辨率不一样）形成的显示效果不能达到理想效果。最多见的问题就是网页元素位置混乱，错位。

2解决方案

对于通常用户来讲

应该用ie8兼容模式浏览网页, 而不该该用ie9或ie10渲染模式. 不少用户安装ie10后发生不少网页显示错乱, 就是兼容性的缘由, 由于ie10默认的渲染模式是ie10. 此时应该将其改成ie7渲染模式。

为何用ie6/7渲染模式的缘由以下:

中国全部网页确定都支持ie, 支持ie就是支持ie内核的全部浏览器. 但并不必定支持chrome, firefox, 双核浏览器的高速模式, 缘由很简单, 网页开发人员没有那么多时间和精力去兼容及测试那么多浏览器, 开发人员能让网页在ie下正常工做已经不错了, 就这还老得加班呢, 有那么多新需求和测试人员测出的bug要改啊[1].

渲染模式和网页打开速度几乎没有关系, 用户感受不到.

对于网站开发者来讲

目前暂没有统一的能解决这样的工具，最广泛的解决办法就是不断的在各浏览器间调试网页显示效果，经过对css样式控制以及经过脚本判断并赋予不一样浏览器的解析标准。

若是所要实现的效果可使用框架，那么还有另外一个解决办法是在开发过程当中使用当前比较流行的JS，CSS框架框架，如jQuery，YUI等等，由于这些框架不管是底层的仍是应用层的通常都已经作好了浏览器兼容，因此能够放心使用。除此以外，CSS提供了不少hack接口可供使用，hack既能够实现跨浏览器的兼容，也能够实现同一浏览器不一样版本的兼容。

3CSS技巧

1.div的垂直居中问题： vertical-align:middle;

将行距增长到和整个DIV同样高： line-height:200px; 而后插入文字，就垂直居中了。

缺点是要控制内容不要换行。

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案：在这个div里面加上 display:inline;

例如： <div id="imfloat"> 相应的css为 #imfloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}[2]

3. 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; /*这种状况之下IE会产生200px的距离, */ display:inline; /*使浮动忽略*/}

这里细说一下block与inline两个元素：

block元素的特色：老是在新行上开始，高度、宽度、行高、边距均可以控制(块元素)；

Inline 元素的特色：和其余元素在同一行上，不可控制(内嵌元素)。

4. 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;}

5. 页面的最小宽度

min -width是个很是方便的CSS命令，它能够指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把width当作最小宽度来使。为了让这一命令在IE上也能用，能够把一个<div> 放到 <body> 标签下，而后为div指定一个类，而后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上经过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

例：

#box{ float:left; width:800px;background-color: #000066;//能够优化为#006;}

#left{ float:left; width:50%;background-color: #006600;//能够优化为#060;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

</style>

</div>

7. IE捉迷藏的问题

当div应用复杂的时候每一个栏中又有一些连接，这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽可能简单。

8.float的div闭合；清除浮动；自适应高度

① 例1：

.float_a,.float_b,.float_c { float:left; }

.clear { clear:both; }

</style>

或者例2：

.float_a,.float_b { float:left; }

.fl_l { float:left;}

.fl_r { float:right;}

.clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clear { zoom: 1; }

</style>

</div>

②做为外部 wrapper 的 div 不要定死高度，为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;能够作到，这样就达到了兼容。

例如某一个wrapper以下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

11.高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：

#box {background-color:#eee; }

#box p {margin:20px 0; text-align:center;//原样式margin-top:20px; margin-bottom:20px; }

</style>

<p>p对象中的内容</p>

</div>

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为div加上 border属性。

12 .IE6下为何图片下有空隙产生

解决这个BUG的方法也有不少，能够是改变html的排版，或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 均可以解决。

13.如何对齐文本与文本输入框

加上 vertical-align:middle;

<!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle;

//垂直方向样式是重点！} -->

</style>

14.web标准中定义id与class有什么区别吗

1、web标准中是不允许重复id的，好比 div id="aa" 不允许重复2次，而class 定义的是类，理论上能够无限重复，这样须要屡次引用的定义即可以使用他；

2、属性的优先级问题 id 的优先级要高于class，看上面的例子三.方便JS等客户端脚本，若是在页面中要对某个对象进行脚本操做，那么能够给他定义一个id，不然只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单。

15. li中内容超过长度后以省略号显示的方法（此方法适用与IE与OP浏览器）

</style>

16. 为何web标准中IE没法设置滚动条颜色了

解决办法是将body换成html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "网址">

</style>

17. 为何没法定义1px左右高度的容器

IE6下这个问题是由于默认的行高形成的。解决的方法也有不少，例如:overflow:hidden | zoom:0.08 | line-height:1px 。

18. 怎么样才能让层显示在Flash之上呢

解决的办法是给Flash设置透明 <param name="wmode" value="transparent" />

19. 怎样使一个层垂直居中于浏览器中

这里咱们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二。

</style>