如果发现li导航底部margin不起作用。。

本来是想模拟下IE6,7 LI 导航“楼梯式”bug 的,结果发现下面的代码IE6,7和其他浏览器显示的效果不一样,请看下代码先,很简单的LI导航

<style>
ul {
	list-style:none;
	font-size:14px;
	font-family:"微软雅黑";
}
li {
	float:left;
	text-align:center;
	background:#009900;
}
a {
	margin:10px;
	display:block;
	color:#f1f1f1;
	float:left;
	display:inline;
}
</style>
<body>
<ul>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
</ul>
</body>

上面的代码在IE8及火狐谷歌浏览器中显示的效果是这样的

但是在IE6,7上面的效果却是这样

可以看到底部的margin不起作用了,无论我设置margin-bottom:100px还是更大的数值,都不起作用

找了很多资料,像什么加入height:100%,overflow:hidden,display:ininle等等没有一个管用的,把我的css样式搞的一团糟,开始我以为是出发了IE的外边距叠加的问题,给加了border不行,然后加了一个很小的padding,也不行,后来索性吧margin:10px改成padding:10px,这样,样式一样了,所有浏览器兼容了,但是不是我想要的结果,我就想用margin来设置,看看margin问题出在哪里

因为CSS代码加了各种hack进去已经没发看了,我决定把CSS样式最简化,然后找出问题所在,刚删了几条语句,突然发现A标记有一个float属性。。想起来是网上找的某hack加进去的。。然后把float删除了,好了,所有浏览器的样式都一致了

通过这个学到了一点,CSS出现问题的时候,最好建立一个简化模型出来,去除不必要的样式,这样查找问题很方便,或许一眼就发现问题所在了,像我今天遇到的这个问题一样,呵呵

还有一天,网上的东西还是需要经过验证的,有些东西可能都是某个网友随口一说,然后就被大家当做秘籍的记住了,等到用的时候发现,根本解决不了问题!

原文链接:,转发请注明来源!

发表评论