众所周知，给元素设置 inline-block ，可以让ie下的元素出发layout:1。

但是，当给元素设置 inline-block 后，在另外一个class 样式（非设置inline-block的class样式）重置为inline或者block。对于ie6下，该元素还会保留触发 layout:1;的效果。

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
　　.box a{display:inline-block;width:30%;background:#ccc;text-align:center;}
　　.box .fl{float:left;background:red;}
　　.box .fr{float:right;background:red;}
　　.box .center{display:block;}
</style>
<div class="box">
　　<a href="#" class="fl">left</a>
　　<a href="#" class="fr">right</a>
　　<a href="#" class="center">center</a>
</div>
</body>
</html>

在ie6下面会发现中间的模块会和左右模块之间有间距，可以看到白色背景。

这个bug就是inline-block样式引起的，虽然后来在 .box .center 样式中重置为block，但是该模块还是保留了layout:1;的属性。

解决办法：　　

<style>

.box a{width:30%;background:#ccc;text-align:center;}

.box .fl{float:left;display:inline-block;background:red;}

.box .fr{float:right;display:inline-block;background:red;}

.box .center{display:block;}

</style>

　　

inline-block在ie6中的经典bug的更多相关文章

  1. IE6中的常见BUG与相应的解决办法

    开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

  2. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  3. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  4. CSS中常见的BUG调试

    1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...

  5. 完美解决浮动IE6 7中的兼容性BUG问题

    想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发 ...

  6. IE6中浮动双边距bug

    想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...

  7. 那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？

    HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...

  8. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  9. display:inline-block 在IE6中实现{转}

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

随机推荐

  1. Python - python不是内部或外部命令

    [方法一]我的电脑->属性->高级->环境变量->系统变量   在系统变量里找到PATH,双击PATH,在结尾加上 ";C:\Python26"(不要引号) ...

  2. Hashmap in java

    1. HashMap要点: 1.1 基本数据结构:  采用 数组+链表/平衡二叉查找树 的组合形式,所有键值对都以Entry<K,V>形式存储(每put进一个键值对,就会实例化一个Entr ...

  3. 【软件工程-Teamwork 3】团队角色分配和团队贡献分分配规则

    Part 1 团队角色分配 1.人员分配概要: Project Manager:1名 / Developer:4名 / Test: 1名 2.具体人员分配及职责: Project Manager(PM ...

  4. Source Insight中文操作支持的宏

    以下是Source Insight中文字符串支持的宏的实现,在此做个备份. 代码来自网上,非笔者所写.原有代码有个明显的Bug(Del的时候会导致多删除一个字符和多插入一个空格),已经被笔者fix掉. ...

  5. java笔记之类和对象

    现在编程的思想分成了两大阵营,面向过程和面向对象.现在谈谈啥是面向对象. 作为一只单身狗,谈“对象”还是很伤心很伤心的(:′⌒`)...... 先看看百度怎么说? 好吧,百度说的太抽象,我换个简单的说 ...

  6. 3573: [Hnoi2014]米特运输 - BZOJ

    Description米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题.    D星上有N个城市,我们将其顺序编号为1到N,1号 ...

  7. 如何通过CSS3实现背景图片色彩的梯度渐变

    随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验. 通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言 ...

  8. H5下拉刷新特效demo，动画流畅

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 灵魂有香气的女子IOS版本APP，近期将考虑开放源代码

    实在太忙,灵魂有香气的女子这个App,断断续续开发了1个多月了,前后台自己独立完成, 由于接触swift没多久,还属于新手行列,不熟悉,希望大家给出意见, 根据意见,完善后将于近期将考虑开放swift ...

  10. Graham's Scan算法

    原文链接:http://www.cnblogs.com/devymex/archive/2010/08/09/1795392.html C++/STL实现: #include <algorith ...