1.H5标签兼容。
解决：
js:document.createElement("footer");
css:display: block;
或者直接使用    html5shiv.js

元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动

;

<div class="box clear">

            <body>

            <div class="box clear">

            <div class="left">

                <h2>左边</h2>

            </div>

            <div class="right">

                <h2>右边</h2>

            </div>

        </div>

    </body>

<style>

        .clear:after{

            content: '';

            display: block;

            clear: both;

        }

        .clear{

            clear: both;

        }

            .box{

                width: 400px;

                border: 1px solid black;

                /*float: left;*/

                //overflow:hidden;

            }

            .left{

                float: left;

                background-color: red;

            }

            .right{

                float: right;

                background-color: blue;

            }

            h2{

                float: left;

                margin: 0;

                height: 30px;

            }

        </style>

2.第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
<!--
            解决方案：
                1、不建议这么写
                2、用浮动解决
        -->

3.IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：
            不要让子元素的宽高超过父级

4.p 包含块元素嵌套规则

5.margin兼容性问题
1、margin-top传递
  触发BFC、haslayout
 2、上下margin叠压
  尽量使用同一方向的margin，比如都设置top或者bottom，

display:inline-block

<style>

            div{

                width: 100px;

                height: 100px;

                background-color: red;

                display: inline-block;

                *display:inline;

                *zoom:1;

            }

 </style>

<!--
            解决方案：
                *display:inline;
                *zoom:1;
        -->
6.IE6 最小高度问题
<!--
            IE6下最小高度19px
            解决方案：
            overflow:hidden;
        -->

7.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离

#box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
          接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{

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

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

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

                  _background-color:#1e0bd1;/*IE6识别*/

              }

8.当元素浮动后再设置margin那么就会产生双倍边距
            解决方案：
                针对ie6、7添加display:inline

9.li里元素都浮动 li 在IE6 7  下方会产生4px间隙问题

.list li{

                height: 30px;

                border: 1px solid red;

                line-height: 30px;

                *vertical-align: top;

            }

 .list li a{

                float: left;

            }

 .list li span{

                float: right;

            }

解决方案：        
                针对ie6，7添加*vertical-align: top;

10.浮动元素之间注释，导致多复制一个文字问题

 <!--

　　 两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px

            解决方案：

                1、两个浮动元素中间避免出现内联元素或者注释

                2、与父级宽度相差3px或以上

        -->

    <body>

        <div class="wrap">

            <div class="left"></div>

            <span></span><!-- IE下文字溢出BUG -->

            <div class="right">&darr;这是多出来的一只猪</div>

        </div>

　　　　<style>

            .wrap{

                width: 400px;

            }

            .left{

                float: left;

            }

            .right{

                width: 398px;

                float: right;

            }

        </style>

    </body>

12.IE6 7 父级元素的overflow:hidden 是包不住子级的relative

<body>

        <div class="box">

            <div class="content"></div>

        </div>

    </body>

<style>

            .box{

                width: 200px;

                height: 200px;

                background-color: red;

                border: 10px solid black;

                overflow: hidden;

                /**position: relative;*/

            }

            .content{

                width: 400px;

                height: 400px;

                background-color: blue;

                position: relative;

            }

        </style>

解决方案：
                针对ie6、7给父级元素添加相对定位

13.IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
解决方案：
                避免父级宽高出现奇数

14.IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：
                浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们

只要让他们俩不处于同级就可以避免这个bug。

15.IE6 下input的空隙

<div class="box">

            <input type="text" />

        </div>

<style>

            .box{

                width: 200px;

                border: 1px solid #000000;

                background-color: red;

            }

            .box input{

                border: 0;

                margin: 0;

                width: 200px;

                height: 30px;

                background-color: #fff;

                *float: left;

            }

        </style>

可以看出input与box间有1px间隙
解决方案：
                给input元素添加float
16.IE6 下 输入类型表单控件背景问题

CSS hack
针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
\9 所有的IE10及之前
+ * IE7及ie7以下的ie浏览器认识    
_IE6及ie6的ie浏览器认识

17.IE6不支持png24 图片。
解决方案：
JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix('xxx');
原生滤镜
    _background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="XX.png", sizingMethod="crop");

IE兼容性问题的更多相关文章

  1. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  2. SQL Server2008R2 在windows8上安装，出现“兼容性”和 “执行未经授权的操作”的错误！

    本人是windows8.1的操作系统,亲测安装成功 解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 ...

  3. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...

  4. 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  6. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

  7. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  8. Atitit Atitit.软件兼容性原理----------API兼容 Qa7

    Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法 ...

  9. Atitit.兼具兼容性和扩展性的配置方案attilax总结

    Atitit.兼具兼容性和扩展性的配置方案attilax总结 文件配置法1 Jdbc多数据源文件配置发1 Bat文件配置法1 改进的文件配置法(采用类似i18n技术) 推荐1 使用自动化pc_id的方 ...

  10. Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结

    Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结 1. 什么是可扩展的应用程序?1 2. 松耦合(ioc)2 3. 接口的思考 2 4. 单一用途&模块化,小粒度化2 ...

随机推荐

  1. SCSS loader effect

    p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 几天来看一组利用SCSS实现的loader effect(载入效果).鼓舞大家自行动手实现,当然也 ...

  2. 【M12】了解“抛出一个exception”与“传递一个参数”或“调用一个虚函数”之间的差异

    1.方法参数的声明语法和catch语句的语法是一样的,你可能会认为主调方法调用一个方法,并向其传递参数,与抛出一个异常传递到catch语句是一样的,是的,有相同之处,但也有更大的不同. 2.主调方法调 ...

  3. 写给新入IT的新人们

    IT=挨踢,这是IT人的自嘲,进入IT行业是有四五年了,也算得上是一个"老人"了吧,见了不少新人,面试了不少新人,也带了一些新人,多多少少还是有点发言权的. 关于书本 新人们经常会 ...

  4. python无私有成员变量

    python解释器将__init__函数里的__z变量转成 _classname__z了,明确规则后外部依旧能够通过实力对象来訪问. In [1]: class aa: ...: def __init ...

  5. starling localToGlobal

    o.localToGlobal(new Point());   返回o在舞台的全局坐标... o.parent.localToGlobal(new Point(o.x,o.y))   //返回指定坐标 ...

  6. 第十一章 Function类型

    在ECMAScript中,Function(函数)类型实际上是对象.每个函数也是Function类型的实例,而且都与其它引用类型一样具有属性和方法.由于是函数对象,因此函数名实际上也是一个指向函数对象 ...

  7. JS ||与&&总结

    ||  从左到右 只要有一个为真 则返回那个真值:如果尤为假则返回最后一个假值 && 从左到右 只要有一个为假 则返回那个假值:如果都为真则返回最后一个真值

  8. Spring在Web项目中的三种启动加载的配置

    在最近的项目中,使用到了spring相关的很多东西,有点把spring的配置给搞混了,从网上查到的资料以及整理了一下. 在Web项目中,启动spring容器的方式有三种,ContextLoaderLi ...

  9. Android（java）学习笔记125：Clock app编写报错02

    1.首先之间看错误: 07-13 10:07:55.354: E/AndroidRuntime(8008): FATAL EXCEPTION: main 07-13 10:07:55.354: E/A ...

  10. About xvfb

    http://blog.csdn.net/span76/article/details/11473315 有时候我们不关注程序是否有界面(比如自动化测试),只要程序在运行就可以了 很感谢 xvfb 这 ...