IE6下margin时，float浮动产生双倍边距

【IE6下margin时，float浮动产生双倍边距】的更多相关文章

IE6下margin时，float浮动产生双倍边距

今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法对元素float-left,然后再对元素设置margin-left:40px,调试时候,鬼一般的出现了双倍的margin-left,变为80px(同样如果是float-right,margin-right亦是如此) 效果如下: 而在chrome,IE7+,均没有这个现象产生,现象如下: 后来,在样式中给元素添加了一个display…

在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ margin: 0; } .box{ width: 750px; border: 1px solid #000; overflow: hidden; } .item{ width: 200px; height: 200px; backgro…

ie6下margin双倍距的问题

今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题, 发现确实如此. 检查了一遍代码, 发现没有什么问题, 测来测去发现也只有ie6会这样, 而且距离始终多了一倍! 百思不解于是就上网搜了下, 发现原来是因为"大名鼎鼎"的ie6margin双倍bug. 解决方案: 解决方案还简单, 只要给对象的css属性加上 display:inline…

IE6下margin出现双边距

在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> body{margin:0;} .wrap{float:left;border:2px solid #000;} .box{width:100px;height:100px;background:red;margin:0 100px;float:left; /*display:inline*/ } /* IE…

IE6下绝对定位元素和浮动元素并列绝对定位元素消失

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .item{ width: 150px; height: 150px; backgrou…

IE6 margin 双倍边距解决方案

一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实现这样的效果,我们给绿色盒模型应用以下CSS属性: 以下为引用的内容:.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; } 很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素…