IE兼容性问题

时间  2019-11-12
标签 兼容性 问题 繁體版
原文   原文链接

第十一章 网页兼容的处理javascript

对于一个网页设计师来讲，众多浏览器间的CSS兼容问题历来都是很是棘手的。因为不一样的浏览器（常见的包括IE6,IE7,Firefox等）对CSS的解析和认知的不一样，严重形成了浏览器页面效果的不一致，使得咱们在进行DIV+CSS页面排版时，不得不时刻考虑到常见浏览器间的CSS兼容性问题。css

 

11.1  解决浏览器兼容的原理html

 

什么是CSS Hack呢？java

 

为解决浏览器间的CSS兼容性问题，设计师们针对不一样浏览器写不一样的CSS code的过程，就是一个Hack的过程了。在这个过程当中，不但要作到浏览器的兼容性，更要合理地作到CSS代码的绝对优化，尽量少地人为制造冗余的代码，使CSS代码尽量简练易读也是很是重要的工做之一。编程

 

为何要用CSS Hack呢？json

 

答案很简单，经过对CSS代码的兼容性问题的解决，使得咱们写出的页面能在不一样的浏览器中达到统一的页面效果。不会出现IE浏览器中无缺的页面拿到FF中去就横七竖八千疮百孔的事情。数组

 

CSS Hack的原理是什么？浏览器

 

根据不一样浏览器对CSS样式的支持程度，解析结果和识别CSS的优先级不一样，设计师们就能够根据这些不一样浏览器的特色来书写不一样的CSS样式代码。IE6能识别下划线_和星号*，IE7能识别星号*，不能识别下划线_，而firefox两个都不能识别，如此，就能够针对IE6.IE7和FF经过对这些特殊符号的使用写不一样的代码了。测试

div{background:green; /* for FireFox */优化

*background:red; /* for IE7 */

_background:blue; /* for IE6 */

}

该样式显示的效果是：在FireFox中背景色为green；在IE7中背景色为red；在IE6中背景色为blue。

 

CSS解析的过程：CSS读取的顺序是由上至下，由左至右。在FireFox下，FireFox不能识别*和_，将下面的两行代码过滤掉不做任何解析，执行background:green;完后结束；在IE7下的解析结果为div{ background:green; *background:red; },根据CSS的优先级能够肯定后面出现的样式会优先于前者被调用，即实现*background:red;的解析；在IE6下，由于三种样式代码均可以解析，解析结果为div{ background:green; *background:red; _background:blue;}，但一样根据CSS的优先级，只会把最后一个样式读取，即_background:blue;被应用。

 

此外，!important声明也能够很好地提高指定样式规则的应用优先权。在IE6和FF中用!important声明能够提升优先级别，但在IE6中的!important声明会被以后的同名属性定义替换。因此，经过*和!important声明二者的搭配也能够很好地解决IE6，IE7和FF三者之间的兼容性问题。

 

区别IE6与FF：background:red; *background:blue;

区别IE6与IE7：background:green !important;background:blue;

区别IE7与FF：background:red; *background:green;

区别FF，IE7，IE6：background:red; *background:green !important; *background:blue;

注：IE都能识别*;FF不能识别*；IE6能识别*，但不能识别 !important；IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

书写的顺序都是FireFox的写在前面，IE7的写在中间，IE6的写在最后面。

 

除了作CSS HACK，咱们在写CSS的时候要尽可能避免可能会出现不兼容的写法，例如margin-top和padding-top，咱们知道使用margin-top在IE8里面可能会不兼容，因此咱们尽可能使用padding-top。一样的，若是你使用高，则尽可能记得在height属性的后面加上overflow属性。下面咱们汇总尽可能多的浏览器兼容的解决办法给你们。

 

11.2  浏览器兼容处理汇总

 

一、  解决IE7和IE7以上版本的兼容问题。

在<head>的后面插入以下代码：
<meta http-equiv="x-ua-compatible" content="ie=7" />

这句话的意思是当浏览器的版本高于IE7时以IE7的模式加载网页。

 

二、解决IE6不支持png图的问题。

 打开http://www.chinalooke.com/js/ie6.js下载JS文件到站点js目录下，把如下代码放到head之间。

<!--[if lte IE 6]> <script src="js/ie6.js" type="text/javascript"></script>

<script type="text/javascript">

DD_belatedPNG.fix('div, ul, img, li, input , a');</script>

<![endif]-->

把上面的代码放在head之间。

 

三、解决IE6不支持除a标记之外的标记的伪类。

打开

http://www.chinalooke.com/UploadFiles/clubfiles/2011-03/2011030414170752881.rar

将下载下来的文件解压到站点根目录下。

在css文件的body{}中加入behavior:url("hover.htc");

 

四、解决border的边界显示不完整的方法

若是咱们对盒子定义了border值，那么在盒子的左右两边会出现断断续续的状况，解决的办法是在盒子中加入background属性和值，背景颜色和背景图片均可以。

 

五、解决左右高度自适应

有时候咱们须要盒子的左右两个子盒子的内容随着任意一个盒子的高自适应，作法是在大盒子里不定义高，但必定加入overflow:hidden，同时左右两个子盒子都写一个底部内边距和底部外边距，一正一负相互抵消，如padding-bottom: 1980px; margin-bottom: -1980px;值必定要写得很大，超过预计的内容的高度便可。代码实例以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>解决左右高度自适应</title>

<style type="text/css">

.main { width: 800px; margin: 0 auto; margin-top: 20px; color: #FFF; overflow: hidden;}

.left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 980px; margin-bottom: -980px;}

.right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 980px; margin-bottom: -980px; }

</style>

</head>

<body>

<div class="main">

<div class="left">

左边

</div>

<div class="right">

<p>右边</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>fdsfdsfdsf </p>

<p>fdsfdsfdsf </p>

</div>

</div>

</body>

</html>

 

六、解决IE6下左浮动左边距为双倍的问题。

在IE6下，若是向左浮动的第一个盒子若是同时存在左外边距，那么显示的真实结果是设定值的两倍，如 .left{float:left;margin-left:10px;}，那么这个盒子在IE6下左边距为20px，解决这个问题的办法有两种，一种是在里面加入display:inline，另一种是再加一个IE6优先的_margin-left:5px;将值减半。

 

七、解决IE6的最小高度问题

在IE6下，盒子的最小高度不能少于12px，解决的办法是在高后面加入overflow:hidden或者是加入font-size:1px;

 

八、解决盒子真实宽高的计算问题

 在IE下面盒子的真实宽和高分为已经定义宽和高以及没有定义宽和高两种状况。

当盒子已经定义宽和高的时候，真实的宽和高=padding值+border值+width值

当盒子没有定义宽和高的时候，真实的宽和高=父级的宽和内容的高

 

九、解决图片以及表单项的垂直居中问题

对于单行文本中出现了图片img和表单项input会使得其与文字垂直方向不能居中对齐的解决办法就是在CSS中对图片或表单赋予一个属性 vertical-align:middle;  这个方法在第九章中详细讲解过。

 

十、解决IE6下的图片下面有空隙的问题

解决IE6下的图片下面有空隙的问题只须要在在图片控制属性下加入vertical-align属性或者直接display转成外联元素。

 

十一、解决英文不断行的问题

在盒子里加入word-wrap:break-word属性能够解决IE中英文不断行的问题。

 

十二、解决ie六、七、8不支持json，解决方法：引入json2.js

加在head之间

<!--[if lt IE 9]>
<script src="__PUBLIC__/js/klxsx/json2.js"></script>
<![endif]-->

 

1三、解决了IE8不支持数组的indexOf方法

今天，测试报过来一个js bug, 在IE8下有个js错误，可是在其它浏览器下(Firefox, Chrome, IE9)下面都很正常。后来调试发现缘由是在IE8下，js数组没有indexOf方法。

在使用indexOf方法前，执行一下下面的js, 原理就是若是发现数组没有indexOf方法，会添加上这个方法。

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

 

 

 

 

 

以上列举的不兼容的问题解决方法只是众多兼容问题中的冰山一角，特别是HTML5和CSS3的出现让IE的兼容问题更加错综复杂，咱们只有养成良好的编程习惯，在不断的实践中总结和避免兼容问题的处理方法，才能写出高质量代码的网页。

对于良好的编程习惯建议以下：

一、  CSS{}中的内容最好一个属性和值做为一行，不要担忧写出来的CSS太长。

二、  在HTML中编写结构的时候要成对的写上注释，方便本身查找错误。

三、  每引入一个选择符都要用IE测试器以及火狐刷新测试，保证结构准确无误。

四、  尽可能避免会形成兼容的写法，同时作到代码精简。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程