什么是浏览器兼容问题？所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

总结一下我编写代码的时候遇到的浏览器兼容问题，跟大家学习。

一、解决无法在IE6下面设置1px高的容器(div)的问题。

　　大家看看这一段代码：

　　<div style="height:1px;width:100px;border:1px solid #000;"></div>

　　当然，这段代码在非IE6下是能够设置1px高度的div的（如左图），但是在IE6中的效果如右图：

　　非IE6下： IE6下：

　　解决方案：在div里面添加一个空格符(&nbsp;)以创建内容；再设置line-height:1px;即可。

　　<div style="height:1px;width:100px;border:1px solid #000;line-height:1px;">&nbsp;</div>

二、透明度opacity不兼容的问题，opacity是属于css2.1的内容，在IE6中并不支持（另外position:fixed;也是css2.1的内容，并不支持IE6）。

　　创建一个宽高100px的div，设置透明度为0.5，背景色黑色如下：

　　<style>　　

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　background: #000;

　　　　}

　　</style>

　　<div></div>

　　效果图分别如下：左边为非IE6，右边是IE6

　　非IE6：　　IE6：

　　会看到在IE6中并不支持该属性，解决方案：

　　<style>　　

　　　　div{

　　　　height: 100px;

　　　　width: 100px;

　　　　opacity:.5;

　　　　filter:alpha(opacity=50);   //解决IE6问题

　　　　background: #000;

　　　　}

　　</style>

　　<div></div>

三、IE6下的横向双倍margin bug。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

　　首先要触发这样的bug，就要达到以下条件：

　　1.元素必须浮动（float）;

　　2.元素必须具有横向margin，margin-left、margin-right

　　3.元素必须块元素

　　4.浏览器必须是IE6。

　　以上条件缺一不可，所以只要不是IE6，就不存在这个问题。解决思路很简单，破坏其中一个条件即可。

　　例如：

<head>

    <meta charset="UTF-8">

    <title>测试浏览器兼容问题</title>

    <style>

        body{

            background: #fff;

        }

        .wrap{

            width: 300px;

            height: 150px;

            margin:50px auto;

            border: 2px solid #333;

            overflow: hidden;

        }

        .wrap div{

            height: 100px;

            width: 100px;

            background: #333;

            float: left;

            margin-left: 20px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div></div>

        <div></div>

    </div>

</body>

　　效果图分别如下：左边为非IE6，右边是IE6

　　

　　可以看到IE6下左边是margin-left值是40px，解决方案：设置display:inline;将其转换成行属性。

四、IE6下如果给图片套上a标签会默认有border。

　　img{

　　　　width: 100px;

　　　　height: 100px;

　　　　}

　　<a href="###"><img src="pic.jpg" alt=""></a>

　　效果图分别如下：左边为非IE6，右边是IE6

　　  

　　这个问题相对比较容易解决，只要设置图片的border:none;就可以了。需要注意的是不是设置a标签的border值，而是设置图片的。

五、IE6下不支持png格式图片的透明效果。

　　解决方案：使用使用插件：DD_belatedPNG.js 插件（如需要该插件，可以自行百度:)）

　　说明一下使用方法：贴上以下代码即可

<!--[if IE 6]>

    <script src="js/DD_belatedPNG_0.0.8a.js"></script>

    <script>

    DD_belatedPNG.fix('*');

    </script>

<![endif]-->

六、提一下拥有布局haslayout。说道浏览器的兼容问题就不得不提haslayout。

　　在IE6、7中，有时候并没有触发拥有布局。haslayout是什么？用我的理解就是如果元素（标签）拥有了布局，那么它就会获得它本身默认的样式，一切布局就会按照这个默认标准布局，也就是这个布局是正常的。然而，如果元素没有了默认的布局，布局是不是会乱呢？（因为我们给的样式是在元素拥有布局[默认样式]之上的）。所以这种情况下，我们就必须触发这个拥有布局，触发haslayout。

　　触发haslayout有很多种方法：

　　1、最常用也最为安全的方法：给没有haslayout的元素设置zoom:1;（其实是不是1不重要，只要除 none 外任意值）。之所以说它最安全，因为其他浏览器根本不认识它。

　　2、设置height：任何值除了auto。

　　3、设置浮动。

　　4、设置width：任何值除了auto。

七、介绍一下盒模型的2种模式。

　　对于盒模型，大家应该也很熟悉，这里只是介绍一下2个模式：标准模式和怪异模式

　　标准模式：通常在非IE低浏览器中。计算方法：占的空间的宽度=内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边 距的宽度（margin + padding+ border+ content）

　　

　　怪异模式：怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法：所占空间总宽度=内容＋外边距（ content＋margin）

　　　　　　　　　　　　

　　他们之间的相同点和不同点其实也很容易看得出来：

　　相同点：都是由margin ,border,padding,content组成

　　不同点：：计算宽/高度方法的不同，标准模式下盒子的总宽度是由margin,padding,border,content的相加得来；怪异模式下：总宽度是由content减去padding、border得来的。

八、浏览器的兼容还有其他的问题，时间有限就没有一一解释，下面提一提：

　　①：在各个浏览器下img有空隙(原因是：回车)

　　②：Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 Max-width/height在ie6中没效果，

　　③：3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。（解决方法用hack）

　　④：当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱（zoom:1）

　　⑤：当多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

　　⑥：两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值。

　　⑦：优先级：被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。

　　⑧：火狐不识别background-position-y 或background-position-x;

　　⑨：ie6 不支持 fixed（前面有提到）

　　⑩：解决 ie6 最大、最小宽高 hack方法（这个说明一下）

　　

/* 最小宽度 */

.min_width{

    min-width:300px;

    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);

}

/* 最大宽度 */

.max_width{

   max-width:600px;

   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);

}

/* 最小高度 */

.min_height{

   min-height:200px;

   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);

}

/* 最大高度 */

.max_height{

   max-height:400px;

   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);

}

　　 ①①：z-index不起作用的 bug

九、css hack：前端开发人员根据不同的浏览器以及不同的版本而分别编写的特定的CSS样式，通俗理解就是专门为不同浏览器设置自己的样式。

　　各版本IE的hark，代码表示：

　　.bb{

　　　　height:32px;

　　　　background-color:#f1ee18;       /*所有识别*/

　　　　.background-color:#00deff\9;   /*IE6、7、8识别*/

　　　　+background-color:#f1ee18;    /*IE6、7识别*/

　　　　_background-color:#f1ee18;    /*IE6识别*/

　　　　}

　　< div class ="bb"></ div >

　　像刚刚png图片不支持插入的代码一样，这种hack用在专门浏览器下，用法如下：下面还有很多类。

　　　　<!--[if IE 6]>

 　　　　   <script src="js/DD_belatedPNG_0.0.8a.js"></script>

   　　　　 <script>

   　　　　 DD_belatedPNG.fix('*');

   　　　　 </script>

　　　　<![endif]-->

符号

含义

示例

！

非运算符

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if !(IE 6)]>除IE6外可以识别<![endif]-->

lt

Less than小于

<!--[ if lt IE 8]>IE8以下版本<![endif]-->

gt

greater than大于

<!--[ if gt IE 8]>IE8以上版本<![endif]-->

lte

less than或equal小于等于

<!--[ if lte IE 8]>IE8及IE8以下版本<![endif]-->

gte

greater than或equal大于等于

<!--[ if gte IE 8]>IE8及IE8以上版本<![endif]-->

|

或运算符

<!--[ if IE 8 |IE 7]>IE7或IE8版本<![endif]-->

&

与运算符

<!--[ if gt IE 6&!IE 8]>除IE8外IE6以上版本<![endif]-->

 
/*类内部hack：*/

    .header {_width:100px;}            /* IE6专用*/

    .header {*+width:100px;}        /* IE7专用*/

    .header {*width:100px;}            /* IE6、IE7共用*/

    .header {width:100px\0;}        /* IE8、IE9共用*/

    .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/

    .header {width:330px\9\0;}    /* IE9专用*/

/*选择器Hack：*/

    *html .header{}        /*IE6*/

    *+html .header{}    /*IE7*/

常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解的更多相关文章

  1. 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

  2. WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  3. Javascript常见浏览器兼容问题

    常见浏览器原生javascript兼容性问题主要分为以下几类: 一.Dom 1.获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以I ...

  4. 理解盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。

    一个元素盒模型的层次从内到外分别为:内边距.边框和外边距IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

  5. 兼容IE6,IE7和firefox可以使用的一些css hack:

    .一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...

  6. div+css常见浏览器兼容问题以及解决办法

    1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图 ...

  7. 浏览器中的user-agent的几种模式

    服务器一般会根据访问的浏览器进行识别,针对不同浏览器才用不同的网站样式及结构,也是通过这个信息判断用户使用的平台模式(手机,pc或平板) 识别为手机一般有这几个关键字: "Windows P ...

  8. IE浏览器和CSS盒模型【转】

    总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范 ...

  9. 常见IE6兼容问题总结

    1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...

随机推荐

  1. WPF UI虚拟化

    ComboBox

  2. Scala 深入浅出实战经典 第43讲：主要介绍类型变量bound

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. Scala深入浅出实战经典之 List伴生对象操作方法代码实战.

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  4. Codeforces Round #381 (Div. 1) A. Alyona and mex 构造

    A. Alyona and mex 题目连接: http://codeforces.com/contest/739/problem/A Description Alyona's mother want ...

  5. BZOJ 4337: BJOI2015 树的同构 树hash

    4337: BJOI2015 树的同构 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4337 Description 树是一种很常见的数 ...

  6. 手机前端页面js

    (function () { var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; va ...

  7. Windows调试学习笔记：（一）WinDBG中加载SOS和CLR

    最近产品环境出现了部分服务器当机情况,虽然重启之后问题就不出现了.但本着彻底解决问题的态度,想要找到root cause.多次尝试Visual Studio失败(可能是代码惊醒了优化和签名)之后,决定 ...

  8. 彩色的Shell

    我常在命令行下工作,以前老被同事说＂你整天在那个黑窗口上倒腾什么?＂ 现在这个问题变成了＂你这个花花绿绿的窗口是什么东西?＂ 其实都是同一个东西:一个兼容于xterm的终端窗口,要么是PuTTY/Ki ...

  9. 在GridView中使用radioButoon

    在GridView中使用radioButoon 方法一: <input type="radio" id='radioSelectFeed' name="radioD ...

  10. server 2012 IIS 启用.NET 4.5

    server2012 自带.NET 4.5 不过IIS服务器只有2.0 和 4.0 所以我们需要手动配置 1.服务器-添加角色和功能 2.依次下一步,选择到服务器角色 -点开web服务器(IIS)-应 ...