`

IE6的float 的问题解决

CSS 
阅读更多
针对IE6 对 float 元素显示不正常的问题

测试了很多次,发现跟 margin 和 padding 没有直接的关系,本质的问题根源在于,包含 float 元素的外层 div,没有设置足够的宽度和高度,也就是说,这个容器没有足够的空间用来显示内部所有的 float 元素。

margin 和 padding 只是一个间接原因,如果没有内外边距,可能外层 div 刚好可以容纳内部的 float。

加上边距后,每个 float 占用的空间就变大了,首先带来的问题是 div 的宽度不够,那么,愚蠢的 IE6 就会产生莫名其妙的问题,反映给用户的现象就是出现鬼影。

解决方案一:准确计算内部 float 元素加在一起占用的宽高,确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值,问题不会再出现。

解决方案二:给浮动的div加上两个语句  1、浮动的div 设置display:inline  2、浮动的div 加overflow:hidden

这样就能解决ie6 下的flaot问题了!

考虑到兼容火狐等,可以用!important标记
分享到:
评论

相关推荐

    IE6特有bug兼容性问题整理

    IE会让相邻的也浮动起来,Chrome 和FF不会,他们的float对象不再占据空间,所以显示效果也不同。 Chrome 下 IE <style> body{ padding:0; margin:0;} #yi{ background:#0033FF; height:298px; width:298px...

    CSS之float在IE浏览器下换行问题解决方法

    float: right; height: 30px; text-indent: -9999px; width: 50px; } <h3> 1F 热门车系 [更多+]</a> </h3> 当程序如上时,a标签会在IE等浏览器下换行。 解决方法,就是把<a> 标签放在文本前面,如下: <h3>

    IE6双倍边距 IE6浏览器会出现双倍边距解决方法

    所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍。下面的代码: 折叠展开XML/HTML Code 复制代码代码如下: <div xss=removed> <div xss=removed></div> ...

    css兼容性问题总结笔记

    1. IE6下float元素margin加倍 4 2. IE6下图片下方有空隙产生 4 3. ie6下空标签高度问题 4 4. IE6下这两个层中间有间隙 5 5. 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度 5 6. 超链接访问过后hover样式...

    IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法

    外置 .main{ float:left;#float:none;... } 第1行给Firefox以及其他浏览器看 第2行给safari/IE6/iE7看,如果safari/IE6/iE7 视觉效果不统一,就要在后面跟IE6/IE7的定义 第3行给IE7看 第4行给IE6以及

    IE7 float:left左浮动失效的解决方法

    下面的例子中在FIREFOX和CHROME等浏览器中,b和c会左对齐显示于两排,但在IE7下却不是,下面有个不错的解决方法,感兴趣的朋友不要错过

    ie6 bug bug

    计师在输出时,最头痛的就是各大浏览器的兼容性了,特别是ie6,多用“可恶”“老不死”来形容!而我看来,其实不然,既然ie6还没“死”,...下面以一个列子来说明用float 解决ie6的兼容性。 一、要布局的导航,如图一

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    这次的情况与上次不同,上次设置浮动的元素没有设置上边距,所以直接将浮动的元素移到不浮动的元素之前就可以解决问题。 但这次浮动的元素加上了外边距,上次的方法失效。 原因没有找到,但是通过下面的方法可以...

    IE6下兼容性常见的几个问题与解决方法

    这篇文章给大家分享了多个关于IE6下兼容性的常见问题,有需要的朋友们下面来一起学习学习吧。 常见问题一:在Ie6下,内容会把父元素设置好的宽高撑开。计算一定要精确 .box{width:400px;} .left{width:200px;height:...

    IE6 float:left margin-left出现两倍像素

    一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px),那么会自动的加一倍变成30px,接下来介绍如何解决此问题,感兴趣的朋友可以了解下

    一个挺常用的float布局div问题解决方法

    问题来了,在IE8/IE9/chrome里面,怎么捣鼓,都没出什么问题~ 这个时候在ff里面也是正常的.然后发现在ie6里面父div的边框没了, ie7里面,第一个换行符前面的div跑到父div的外面去了,认了老子做弟弟怎么行啊~ 经过测试...

    img图片在ie下有有空隙

    好久没出现img中的空隙啦 平时写全局样式的时候很注意 用到什么标签及时的内外边距...亲爱的朋友,你晓得如何解决吗? 一般有两个方法 1,img{float:left} 2,img{display:block} img图片在ie下有有空隙www.jqueryba.com

    li float后IE下有空格

    复制代码代码如下: <ul> <li><a>LINK</a></li> <li><a>LINK</a></li> <li><a>LINK</a></li> <li><a>LINK</a></li> <li><a>...} IE里面在没定义li宽度的时候LINK后面会有空格,只要里面的a也加上float:left问题就解决了

    解决在ie6中,图片下方出现空隙的办法

    在ie6中,图片的下方会出现多余的空隙。如何来解决这个问题呢? 其实解决这个问题有很多种方法。可以设置图片的浮动属性float:left/right、或者把图片转换为块级对像display:block、或者改变html的排版形式、或者把...

    IE6 两个div有间隙的问题(IE 3px bug)

    已存在解决方法:利用float和margin的负值偏移来实现,这两种方法虽好,但是对于前一种方法如果这两个div包含在另一个div中,且这个div已经float的话,这个方法是无效的。 本题目采用方法:即在其中的某个div的css中...

    IE下css常见问题总结及解决

    1、div的垂直居中问题:  解决方法:将行距增加到和整个DIV一样高: 复制代码代码如下:div{ height: 100px; line-height: 100px;...ie6下,div设置为float时,左(右)margin会加倍。  解决方法:在这个div里面加上d

Global site tag (gtag.js) - Google Analytics