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 即可；

2、还有下面的边距没有生效:margin-bottom 没有生效

解决办法：在CSS父级元素中加入 overflow:hidden 或是 zoom:100%即可

正常显示

ul{overflow:hidden;margin:10px;}

li{ list-style:none; float:left; margin-right:10px;display:inline;} //此时显示正常

/*此时margin-bottom有效,overflow与zoom任意加一个都可以*/
其实：margin-top可在里层写，而margin-bottom要在效果的最外层。否则在ie7没效果。ie6,8可以有。

IE扩展框问题浮动下降 IE6双倍边距图片下空隙层间隙对齐文本 FF撑开高度

图文混排容易导致扩展框问题.

<div><img src="data:images/index_1.jpg" />扩展框问题</div>
这样排版容易导致扩展框问题.
尽量定义宽高给定值 * 浮动下降问题
加上｛float：left；｝即可```

IE6 的双倍边距BUG
解决办法是加上display:inline

IE6 下为什么图片下方有空隙产生
解决这个BUG 的方法也有很多，可以是改变html 的排版，或者设置img 为display:block
或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.

IE6 下这两个层中间怎么有间隙
这个IE 的3PX BUG 也是经常出现的，解决的办法是给.right 也同样浮动float:left 或者相对IE6 定义.left
如何对齐文本与文本输入筐
遇到此种问题，设置文本框的vertical-align:middle 就可以了

为什么FF 下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height 设置min-height:200px; 这里为了照顾不认识
min-height 的IE6 可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}

巴特西

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

最新文章

热门文章