IE6 margin 双倍边距解决方案

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

在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/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline…

ie6下margin双倍距的问题

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

【IE6双倍边距】-IE6双倍边距的bug

效果代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; background: red; margin-top: 20px; margin-left: 20px; float: left; display: inline; } .div2 { width: 300px; height: 200px; background: blue; float: left; } bug…

双倍浮向（双倍边距）（只有IE6出现）

声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. 描述:在IE6中,一个居左(或居右)浮动的元素放置进一个容器盒(box),并在浮动元素上使用了左边距(或右边距) 在ie6内便产生双倍边距. hack:给浮动元素添加声明:display:inline; 案例代码: 1 <title>IE6双倍边距</title> 2 <style type="text/css"> 3 *{ ; ; 6 } 7 8 .box1 { 9 /*d…

慎用margin系列2---ie6双倍边距问题

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

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双倍边距BUG

解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的CSS属性中加入“display:inline;”,代码如下: #redBlock{width:200px;height:200px;background:#900;margin-top:20px;margin-left:20px;float:left;display:inline;}…

双倍边距bug

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} li{width: 59px; height: 87px; float: left; margin: 20px; background: #333333; po…

关于collapsed margin（外边距合并）

这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里重新展示出来,代码如下: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.js&qu…

CSS Margin（外边距）

CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性. margin 属性值: Margin可以使用负值,重叠的内容. 二.Margin - 单边外边距属性在CSS中,它可以指定不同的侧面不同的边距: margin-top:100px; margin-bottom:100px; marg…

css中margin上下外边距重叠问题

css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin,一个有下外边距margin,这个问题变得有点复杂.我们来看看. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr…

margin负边距的使用（超简单）

写在开头: 在css的世界中,一切都是框,所有的框都处于流动的状态 margin负边距可以使文档流发生偏移在没有设置margin-bottom的时候,parent的高度会跟随child的内部元素的高度而变化,当设置了margin-bottom为-10px以后,相当于在child的border-bottom边线上10px的位置设置了一条拦截线,此后元素便会在这条拦截线下面流动,此时的父元素的高度会比子元素减少10px,一般在使用的过程中,我们会配合使用overflow:hidden来使得子元…

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

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

ie6的设置外边距margin变双倍的问题

子元素避免同时使用float和margin. 如: 需要子元素的margin-bottom:20px时,可以给用父元素设置padding-bottom:20px代替.…

ie6的兼容问题及解决方案

1.png24位的图片在ie6浏览器上会出现背景,解决方案是做成png8位: 2.浏览器默认的margin和padding不同,解决方法是用全局重置来统一,即是*{margin:0;padding:0} 3.对于块元素,给了横行的margin值,和浮动float,在ie6中会产生双边距问题,解决方法是转行内元素,eg:#box{ float:left; width:10px; margin:0 0 0 10px;_display:inline}在这种情况下ie6会产生20px的边距: 4. 渐进…

IE6中浮动双边距bug

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

IE6下Png透明最佳解决方案(推荐) Unit PNG Fix

引自:http://www.yeeyan.org/articles/view/98510/67784 网络上解决IE6下Png透明解决方案有很多,例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways.等等.然而现在,我要和你分享的是 Unit PNG Fix . 因为它的确是太出众了. 1.非常小的javascript文件:1kb!2.解决…