想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时，却压根找不出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了，因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的？咱们双该如何解决呢，别急，请听我慢慢道来：

 1.在IE 6 7 元素浮动要并在同一行都要加浮动

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ie双边距问题</title>

</head>

<style>

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

    .box{width: 400px;}

    .right{width: 300px;float: left;}

</style>

<body>

    <div class="box">

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

<!--在IE 6 7 元素浮动要并在同一行都要加浮动*--->

        <div class="right">

              想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时，却压根找不出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了，因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的？咱们双该如何解决呢，别急，请听我慢慢道来：

        </div>

    </div>

</body>

</html>

不加浮动的话 在ie67 下会有3px如图：

所以在在IE 6 7 元素浮动要并在同一行都要加浮动

     一：IE6、 7下双边距Bug
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！
先来看一下图片：
 
     在下面的实验中，我们要让这个绿色的盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：
以下为引用的内容：
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*外边距的最后一个值保证了100像素的距离*/ 
}
     看起来是很简单的吧？但是当我们在IE6中查看时，却会发现左侧外边距100像素，被扩大到200个像素。如下图：
 
     二：该如何来修正这个Bug？
     这个修正其实很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单？对，就这么简单。如下图：
 

CSS代码如下：

以下为引用的内容：
.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}

例子：

 <!DOCTYPE HTML>

 <html>

 <head>

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

 <title>无标题文档</title>

 <style>

 body{margin:0;}

 .wrap{float:left;border:2px solid #000;}

 .box{width:100px;height:100px;background:red;margin:0 100px;float:left; }

 /*

     IE6下的双边距BUG

12     在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍

13

14     解决办法: display:inline;

 */

 </style>

 </head>

 <body>

 <div class="wrap">

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

 </div>

 </body>

 </html>
以上方法是我在网页设计中总结出来并不断实践过的方法，希望能让浏览到这篇文章喜欢学习的兄弟姐妹受益！

 一：IE6、 7下IE67下li的4px间隙

 <!DOCTYPE HTML>

 <html>

 <head>

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

 <title>无标题文档</title>

 <style>

 .list{ width:300px;margin:0;padding:0;}

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

 .list a{float:left;}

 .list span{float:right;}

 /*

12     IE6，7下li的间隙

13

14     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

15

16     解决办法: 1.给li加浮动

17         2.给li加vertical-align:top;

18 */

 </style>

 </head>

 <body>

 <ul class="list">

     <li>

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

         <span>作者</span>

     </li>

     <li>

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

         <span>作者</span>

     </li>

     <li>

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

         <span>作者</span>

     </li>

     <li>

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

         <span>作者</span>

     </li>

 </ul>

 </body>

 </html>

vertical-align 清除掉边距问题

三：IE6、 7下最小高度

 　　使用font-size:0;或overflow：hidden；

完美解决浮动IE6 7中的兼容性BUG问题的更多相关文章

  1. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  2. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  3. 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题

    这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...

  4. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  5. [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  6. 在head标签里加一个meta标签让指定ie使用特定内核 解决css在ie中的兼容性问题

    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"/> IE=edge: ...

  7. 如何在一个顶级域名下用两个二级域名访问vps下的两个项目网站--完美解决骗

    本人是原址是http://www.webzhe.com/server/340 后经过本人的实践修改,增加截图,等具体的步骤,完美解决 如何在vps中设置二级域名开通子网站,这个问题涉及到两步:一首先要 ...

  8. IE6/7中li浮动外边距无法撑开ul的解决方法

    昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  9. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

随机推荐

  1. Filebeat轻量级日志采集工具

    Beats 平台集合了多种单一用途数据采集器.这些采集器安装后可用作轻量型代理,从成百上千或成千上万台机器向 Logstash 或 Elasticsearch 发送数据. 一.架构图 此次试验基于前几 ...

  2. PHP基础 windows环境下安装Apache Mysql PHP

    本篇文章主要是讲一下我自己安装wamp环境的一些步骤和见解,前方多图预警,慎入!!!!! PHP运行环境  : Linux下的三种安装方式:源码包安装.rpm包安装.集成环境安装(lnmp) wind ...

  3. 【算法】字典的诞生：有序数组 PK 无序链表

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  4. 深入常用CSS声明(一) —— Background

    一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生. 这里 ...

  5. Entity Framework Code First+SQL Server，改变聚集索引，提高查询性能

    .net Entity Framework(调研的是Entity Framework 4.0) code first方式生成数据库时,不能修改数据库表的索引,而SQLServer默认会把数据表的主键设 ...

  6. python项目依赖管理分享迁移后重建开发环境（一）virtualenv 和 pip

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/rebuild-development-environment-with-virtualenv-an ...

  7. Codeforces 850C Arpa and a game with Mojtaba

    题意:给定一个正整数序列,两人轮流对这个数列进行如下修改:选取一个素数p和一个整数k将序列中能整除p^k的数除以p^k,问谁有必胜策略. 借此复习一下sg函数吧,sg(x) = mex ( sg(y) ...

  8. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

  9. MyBatis多租户隔离插件开发

    在SASS的大潮流下,相信依然存在很多使用一个数据库为多个租户提供服务的场景,这个情况下一般是多个租户共用同一套表通过sql语句级别来隔离不同租户的资源,比如设置一个租户标识字段,每次查询的时候在后面 ...

  10. uva--10700

    题意: 输入一串仅仅含有+和*号的表达式,能够通过加入括号来改变表达式的值,求表达式的最大最小值. 思路: 表达式中的数都是不大于20的正整数,由a*b+c<=a*(b+c)能够知道.先算乘法后 ...