ie6中margin失效问题

在div的外面添加父级div并设置 padding-bottom: 10px;！

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>

        .clear {            zoom: 1;            /*iE 6;*/        }

        .clear:after {            content: "";            display: block;            clear: both;        }

        .wrap {            padding-bottom: 10px;        }

        #div1 {            width: 100px;            height: 100px;            background: red;            float: left;        }

        #div2 {            width: 200px;            height: 100px;            background: yellow;        }    </style></head><body><div class="wrap clear">    <div id="div1"></div></div><div id="div2"></div>

</body></html>

时间： 2024-08-10 00:04:24

ie6中margin失效问题的相关文章

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

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

[ 打败 IE 的葵花宝典 ] IE6中css常见BUG全集及解决方案

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方

div在IE6中固定

在IE6中固定一div在右下角,但是ie6不支持position:fixed属性,那么只能通过js实现,通过js判断浏览器在ie6的情况下,div的position为absoluate:right:0:bottom:0:indexOf() 方法对大小写敏感,如果要检索的字符串值没有出现,则该方法返回 -1. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name

IE6下margin双倍边距Bug的处理办法

改了一天,我才发现了问题,除了IE6双倍边距之外,其他的浏览器都没有问题,为此改了无数次的代码.为了修复双倍边距bug,整理了一下的资料. 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实现这样的效果,我们给绿色盒模型应用以下CSS属性: 以下为引用的内容:.floatbox { float: left; width: 150px; height

IE6双倍margin间距解决方法

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

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会

关于ie6中使用css滤镜[_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png',sizingMethod='scale')]后链接无法点击的问题

RT,我做的一个效果是试用png图做背景,通过_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png',sizingMethod='scale');来实现,但是使用这个滤镜后,ie6下面的链接.按钮等都失效,无法点击网上搜索很多都是通过给链接加上position:relative;解决不知道是我ie6绿色版本问题还是其他原因,我代码中加上这句无效…… 另:png透明的层我设置了绝对定位,貌似这个导

CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)pad

项目记录：spring+springmvc 项目中 @Transactional 失效的解决方法

第一步,修改spring的配置文件和springmvc的配置文件 --------------------------------applicationContext.xml <context:annotation-config/> <context:component-scan base-package="com.xxx"> <context:exclude-filter type="annotation" expression=&