【慎用margin系列2---ie6双倍边距问题】的更多相关文章

【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双倍边距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;}…

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

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

慎用margin系列3---IE6下3px bug

当我们想让一段文字出现在一个布局块的右边的时候,我们会让布局块向左浮动,然后把段落设置左布局块宽度大小的左空白.比如左布局块是.a{float:left;height: 110px;width: 286px;},我们就设置p{margin-left: 286px;border: 1px solid #000;},其中背景颜色和边框都是测试用的,不是必要的样式设置.在Firefox下可能没问题,但在IE下,你会发现布局块右边的段落离左边框有3px的空白,这就是一个bug.如图1 为了解决这个bug…

慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策

  对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值,所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可. 但对于父块DIV内含子块DIV的情…

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出现）

声明: 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…

在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间距解决方案

      问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px. 解决办法: 方法一.当将其display属性设置为inline时问题就都解决了. 说明:这是因为块级对象默认的 display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况.也许你会问:“为什么第二个对象和第一个对象之间就不存在 双倍边距的BUG”?因为浮动都有其相对应的对象…

IE6 双倍距BUG

IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;…

css ie6双倍margin现象

IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现,我们特别喜欢,浮动的方向和margin的方向相反.并且,前端开发工程师,把这个当做习惯了. 1 float: left; 2 margin-right: 40px; 2)使用hack(没必要,别惯着这个IE6) 单独给队首的元素,写一个一半的margin 1 <li class="no1&qu…

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

margin系列之keyword auto

本系列摘自  px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩,我就是那个需要水平居中的家伙.</p> </div> 为了更明显点,我们来看个例子:margin实现块元素水平居中.Cool,这么简单就实现了水平居中. 不过你可能也发现了不论是 margin: auto; 还是 margin: 0 auto; 效果都是一样的,都是让 #demo 水…

margin系列之百分比

本系列摘自  px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p>恩,注意看我所在的位置.</p> </div> 事实告诉我们结果是 100px 50px 100px 50px,不论结果是否符合你的预期,我们先来看demo验证一下:margin百分比结果猜想,当然,你也根据上面还原的代码自己创建一个例子. 为什么会这样? 诧异吗?不用怀疑浏览器出…

margin系列之内秀篇（二）

本系列摘自  飘零雾雨的博客 可挖掘性 之前已经写过一篇关于 margin 应用场景的文章:margin系列之内秀篇,当然,它的应用场景会远大于文中所述,无法一一列举. 所以本篇权当是对此的补遗好了,各位客官如有比较Cool的想法都可以留言给我,我会视情况补丁进来. 1像素圆角 这有什么好聊的吗?border-radius 瞬间可将之秒杀.恩,有的时候你不得不承认CSS3真是一把大杀器.不过当年我们是怎么做的?(会暴露年龄么?) 先看看我们要做什么,图一: (图一) 如上图一,我们会这样写: H…

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

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

IE6 margin 双倍边距解决方案

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

IE6双倍margin间距解决方法

虽然现在很少有人在用ie6了,但作为前端人员,是不的不面对的问题. 在ie6中,使用float后的元素,在margin—left,这是你会发现距离和你想的不一样,其他的浏览器又是正常的,增大margin—left这一现象会更明显. 解决此办法的最简单的方法是,在style中添加:display:inline; 或者是在ie6中设置的margin减半,例如(本来是设置margin的值为30px的): _margin:15px;/*ie6*/ “_”属性值前面加_ :是只有ie6才能认识的符号 ;…

ie6下双边距的问题

1.ie6双边距情况 <div class="red"></div> <div class="blue"></div> body,div{ margin:0px; padding:0px; } .red{ width:200px; height:200px; background: red; float:left; margin:20px; } .blue{ width:300px; height:200px; bac…

margin系列之内秀篇

本系列摘自  飘零雾雨的博客 最Cool的利器 一样东西在不同的场景,不同的人手里,所能做的事会有很大不同.我深切的以为 margin 绝对是 CSS 中最有能力的利器之一,不知大家以为然否? 前面几篇文章大概的讲了一些关于 margin 的特性,所以本篇会聊聊 margin 的实际应用场景,也算让自己休息一下,不用再讲知识点. 有个很典型的需求 相信接下来这个需求,你十有八九实现过,甚至实现过多次,来看 图一: 我们看到这个图中,有个列表,每个列表项下面都有一条线,但最后一项没有.我们预期的代…

Android UI系列-----长度单位和内外边距

这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑的分辨率,例如手机的分辨率是800*480,表示的是手机的屏幕宽有480个像素,高邮800个像素. 我们看到,我们的屏幕其实就是由这样一个一个的小格子(称之为像素)组成的,分辨率越高,就说明越清晰. dpi:我们再来看看dpi的概念,dpi(dots per inch)表示的是每英尺的点(像素)数,…

CSS 解决IE6双倍距离BUG

只要满足下面3个条件才会出现这个BUG: 1)要为块状元素:        2)要左侧浮动:        3)要有左外边距(margin-left): 解决这个BUG很容易,只需要在相应的块状元素的CSS属性中加入“display:inline;,…

IE6下不能定义1px高度的容器和IE6 双边距

    (1)触发的条件---定义一个div,将容器的高度设置成1px (2)  编码得到的结果---在IE6浏览器中,容器的高度不是1px   而是18px (3)出现问题的原因---是因为IE6浏览器下默认的行高 (4)解决的方法---添加属性  line-height:1px   overflow:hidden;  (可有可无的 属性 zoom:1;)    关于IE6双倍边距bug解决 (1)触发的条件: 父元素中的子元素设置了float属性  同时,在某个方向上的浮动又添加了相应的ma…

关于IE6的一些总结

开篇之前,循例简单说说IE6的一些背景吧. IE6是指微软浏览器系列中的第六个版本,它是在2001年的时候伴随着XP系统的问世而同时推出的一款浏览器.因为XP普及的原因,这款浏览器一度问鼎全球浏览器市场份额宝座,最高的时候甚至超过了90%!它风光过,可是也留下了非常惹人麻烦的手尾,尤其是对开发人员来说.近年来互联网发展迅猛,网络或者说网站对我们来说显得越来越重要.随之而来的是,网页制作就变得越来越重要了,所以从前的网页制作演变成了现在的前端开发.因为web应用越来越多,也越来越复杂,所以标准和规…

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

今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高. 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器…

IE6 BUG 汇总

1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 2.3像素问题及解决办法 当浮动元素与非浮动元素相邻(注意这里的相邻可以是纵向的也可以是横向的)时,这个3像素的Bug就会出现,它会偏移3像素.实际表现就是两个元素之间产生了一道缝隙!解决方法很简单,将两个元素都…

常见的IE6兼容以及css兼容

IE6虽然随着XP系统退出市场在国外基本基本消失,但是在国内依然占据很大的市场份额.政务网站.页游官网等依然要考虑到IE6用户的体验.如果你的网站使用CSS3等“新技术”时,就必须果断放弃IE6的兼容. IE6不支持兄弟选择器和多类选择器,使用时一定要注意. 浏览器添加默认样式 问题: 有些浏览器会给浏览器添加默认样式,而且不同浏览器添加的样式不同,导致布局在不同浏览器发生不同的错乱. 解决: 清楚默认样式,保证不同浏览器样式统一.(百度中有很多不错的清除样式模板)以下是我自己常用的清除样式文件…

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

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE6BUG,以及解决的办法. 一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:in…

IE CSS Bug 系列

1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>IE6&IE7图片链接无效</title> <style> html,body { padding: 0; margin: 0; } .m-box a { display: block; width: 270p…

IE6下的bug

一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG 二.IE6中3像素问题及解决办法 当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙.诡异的是如果右侧的容器没设置高度时3px的间…