目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。

1.有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。

　　解决方法：给对应的父级加overflow:hidden;但是会有部分被隐藏掉，最好是精确计算宽高再设定

eg：（ie会撑开）

 <style>

 .box{ width:400px;}

 .left{ width:200px;height:300px;background:red;float:left;}

 .right{ width:200px;float:right;}

 .div{width:180px;height:180px;background:blue;padding:15px;}

 /*

     计算一定要精确 不要让内容的宽高超出我们设置的宽高

     在IE6下，内容会撑开设置好的宽高

 */

 </style>

 </head>

 <body>

 <div class="box">

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

     <div class="right">

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

     </div>

 </div>

 </body>

2. 在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。

eg：

 <style>

 .box{ width:400px;}

 .left{background:red;float:left;}

 .right{float:right; background:blue;}

 h3{margin:0;height:30px; float:left;}

 /*

     在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动

 */

 </style>

 </head>

 <body>

 <div class="box">

     <div class="left">

         <h3>左侧</h3>

     </div>

     <div class="right">

         <h3>右侧</h3>

     </div>

 </div>

 </body>

3. 在IE6下元素的高度的小于19px的时候，会被当做19px来处理

　　解决办法：添加overflow:hidden;

4. 在IE6下border:1px dotted #000;中，dotted不支持，会以虚线的方式的出现。

　　解决方法：切背景平铺

5. 在所有浏览器中子元素的margin-top，margin-bottom值会传递给父级；

　　解决办法：

　　　　a：给父级都添加浮动（或者给子级添加浮动也能解决margin-top问题，但是margin左右值会出现双倍的值，也就是双边据bug问题，下面会讲）；

　　　　b：给父级添加position:relative;(或position:absolute;但是会脱离文档流)

　　　　c：添加display:inline-block; 正常浏览器，可行，但是IE,7下，块元素不支持display:inline-block;

　　　　d: 给附件添加border属性，例如border:1px solid red; 正常浏览器可行，在IE6下必须再给父级添加zoom:1;

eg:

 <style>

 body{margin:0;}

 .box{background:blue;border:1px solid #000; zoom:1;}

 .div{width:200px;height:200px;background:red;margin:100px;}

 /*

     在IE6下解决margin传递要触发haslayout

     在IE6下父级有边框的时候，子元素的margin值消失

     解决办法:触发父级的haslayout

 */

 </style>

 </head>

 <body>

 <div class="box">

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

 </div>

 </body>

6. 在IE6下，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍。

　　解决办法：添加display:inline;

 <style>

 .box{ float:left;border:10px solid #000;}

 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}

 /*

     margin-right 一行右侧第一个元素有双边距

     margin-left 一行左侧第一个元素有双边距

 */

 </style>

 </head>

 <body>

 <div class="box">

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

 </div>

 </body>

7. 在IE6，7下，li自身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

　　解决办法：1.给li加浮动
        　　　　  2.给li加vertical-align;

注意：当IE6下最小高度问题，和 li的间隙问题共存的时候， 给li加浮动才能解决。

eg:

 <style>

 ul{margin:0;padding:0;width:302px;}

 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}

 a{width:100px;float:left;height:30px;background:Red;}

 span{width:100px;float:right;height:30px;background:blue;}

 /*

     在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

     解决办法:

         1.给li加浮动

         2.给li加vertical-align

 */

 </style>

 </head>

 <body>

 <ul>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

 </ul>

 </body>

8.当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

　　解决方法：额，还没发现

eg：

 <style>

 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}

 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}

 /*

     当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

 */

 </style>

 </head>

 <body>

 <div class="box">

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <!-- <div>4</div> -->

 </div>

9. 在IE6下的文字溢出BUG。即：子元素的宽度和父级的宽度相差小于3px的时候,或者两个浮动元素中间有注释或者内嵌元素的时候，IE6下文字溢出

解决办法:用div把注释或者内嵌元素用div包起来。

eg：

 <style>

 .box{ width:400px;}

 .left{float:left;}

 .right{width:400px;float:right;}

 </style>

 </head>

 <body>

 <div class="box">

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

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

     <div class="right">&darr;哈哈哈哈哈哈哈哈哈哈</div>

 </div>

 <!--

     在IE6下的文字溢出BUG

     子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素

     解决办法:用div把注释或者内嵌元素用div包起来

 -->

 </body>

10. 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。
    解决办法: 给定位元素外面包个div。

eg：

 <style>

 .box{ width:200px;height:200px;border:1px solid #000; position:relative;}

 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}

 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}

 /*

     当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

     解决办法:

         给定位元素外面包个div

 */

 </style>

 </head>

 <body>

 <div class="box">

     <ul></ul>

     <span></span>

 </div>

11. 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素。

　　 解决办法: 给父级也加相对定位 position:relative;。

eg：

 <style>

 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /*  position:relative; */ }

 .div{ width:150px;height:300px;background:yellow; position:relative;}

 /*

     在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

     解决办法: 给父级也加相对定位position:relative;

 */

 </style>

 </head>

 <body>

 <div class="box">

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

 </div>

 </body>

12. 在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差.

　　解决办法: 尽量用偶数，还没发现别的方法。

13. 在IE6下，position：fixed; 是没有效果的。

　　解决方法：用js来控制吧。。。

 <style>

 body{height:1000px;margin:0;}

 .box{width:100px;height:100px;background:Red; position:fixed;left:50px;bottom:150px;

     _position:absolute;

     _bottom:auto;

     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||0)));

 }

 </style>

 </head>

 <body>

 <div class="box"></div>

14. 在IE6，7下输入类型的表单控件上下各有1px的间隙。

　　解决办法：给input加浮动，或者是绝对定位。

15. 在IE6，7下输入类型的表单控件加border:none;会发现border还在，

　　 解决办法: 重置input的背景，如input{background:#fff;}; 或者使用border:0;或border:0 none;

16. 在IE6，7下输入类型的表单控件输入文字的时候，其背景图片会跟着一块移动 。

解决办法: 把背景加给父级。

17.关于margin负值在IE6下不兼容的问题，

　　解决办法：给对应的属性加position:relative;

eg:

 <style>

 .box{float:left;border:10px solid #000;margin:20px; display:inline;}

 .box div{width:100px;height:100px;background:red; /* position:relative; */}

 .div1{margin-top:-30px;}

 .div2{margin-left:-30px;}

 .div3{margin-bottom:-30px;}

 .div4{margin-right:-30px;}

 </style>

 </head>

 <body>

 <div class="box">

     <div class="div1"></div>

 </div>

 <div class="box">

     <div class="div2"></div>

 </div>

 <div class="box">

     <div class="div3"></div>

 </div>

 <div class="box">

     <div class="div4"></div>

 </div>

目前知道的css兼容性问题只有这些，当然不包括css3，如有新发现或以上存在问题，请给予指点。

总结css兼容问题的更多相关文章

  1. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

  2. 主流浏览器css兼容问题的总结

    最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...

  3. CSS兼容问题实用建议

    CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...

  4. css兼容问题集合

    css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...

  5. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  6. CSS兼容常用技巧

    请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...

  7. ie6 7 8 9 firefox的css兼容问题

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

  8. css兼容问题与实践归纳总结

    css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...

  9. 浏览器 CSS 兼容写法的测试总结

    做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...

  10. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

随机推荐

  1. vim使用指北 ---- Global Replacement

    一般替换 s/old/new   --- 替换当前行的第一个匹配项 s/old/new/g ---- 替换当前行所有的匹配项 number1,number2-s/old/new/g  ---- 替换从 ...

  2. Python - 装饰器使用过程中的误区

    曾灵敏 - APRIL 27, 2015 装饰器基本概念 大家都知道装饰器是一个很著名的设计模式,经常被用于AOP(面向切面编程)的场景,较为经典的有插入日志,性能测试,事务处理,Web权限校验, C ...

  3. ZOJ3560 Re:the Princess(高斯消元法)

    题目要读很久才能理解它的意思和笑点(如果你也看过那个笑话的话),读懂之后就会发现是一个高斯消元法的题目,对于我来说难点不在高斯消元,而在于字符串处理.先来说说题意吧: 总共有n个人,n个人都会有一段话 ...

  4. Android屏幕适应详解（二）

    android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样).  在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等. ...

  5. CodeIgniter API

    http://apigen.juzna.cz/doc/EllisLab/CodeIgniter/tree.html Classes CI_Benchmark CI_Calendar CI_Cart C ...

  6. a cold welcome

    What does 'a cold welcome' refer to? On wednesday evening,we went to the town hall. It was the last ...

  7. lintcode：背包问题II

    背包问题II 给出n个物品的体积A[i]和其价值V[i],将他们装入一个大小为m的背包,最多能装入的总价值有多大? 注意事项 A[i], V[i], n, m均为整数.你不能将物品进行切分.你所挑选的 ...

  8. 学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装

    在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...

  9. Linux服务器沦陷为肉鸡的全过程实录

    1 从防火墙瘫痪说起 2015年3月10日,还没到公司就被电话告知办公室无法正常连接互联网了,网速非常慢,无法正常浏览网页.急急忙忙感到公司,开始查找问题. 首先排除了交换机故障,因为内部局域网正常. ...

  10. Python命令行解析库argparse

    2.7之后python不再对optparse模块进行扩展,python标准库推荐使用argparse模块对命令行进行解析. 1.example 有一道面试题:编写一个脚本main.py,使用方式如下: ...