1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › IE6双倍margin问题的解决办法

IE6双倍margin问题的解决办法

dly 发表于 2011-12-4 20:43:08 | 显示全部楼层 |阅读模式

IE6出现双倍margin的情况：浮动，且margin方向与浮动方向相同。
例：css：

ul.li { list-style:none;}

ul { overflow:hidden; zoom:1; width:220px; margin-left:10px; border:1px solid #ccc;}

ul li { float:left; margin-left:5px;}

ul li a { display:block; width:100px; height:20px; text-align:center; background:#ccc;}
复制代码

html：

<ul>

<li><a href=”#”>双倍margin问题</a></li>

<li><a href=”#”>双倍margin问题</a></li>

</ul>
复制代码

效果如图：

ie7显示效果

IE6双倍margin

IE6下便出现了双倍的外边距。
解决的办法：
1、在li设置“display:inline”
2、不是办法的办法，避免margin的方向与float的方向相同。例如写成这样：ul li{ float:left; margin-right:5px;}
3、有一次上面所有的方式都不行，用这个display:inline-block;就可以了，呵呵

ccc, background, display, border, center

本帖子中包含更多资源

您需要登录才可以下载或查看，没有帐号？立即注册

上一篇：神马浮云色系八种配色discuz x2模板免费【恩斯道系列免费模板第二弹】
下一篇：请问？如何隐藏板块后面的发帖数字

IE6双倍margin问题的解决办法

本帖子中包含更多资源

相关帖子