这是一个导航菜单的CSS,在除IE6的其他版本下.lavaLampWithImage li a的margin设置为auto 12px是正常显示的,但是在IE6下margin显示过大,后面的菜单被挤到第二行了。 只有把.lavaLampWithImage li a 的margin设置为auto 6px才能正常显示。。怎么解决这个问题呢?
- CSS code
.lavaLampWithImage { position: relative; width: 930px; background: url("../img/bgTitle.png") no-repeat top; padding: 35px; margin: 0px 0; overflow: hidden; } .lavaLampWithImage li { float: left; list-style: none; } .lavaLampWithImage li.back { background: url("../img/lava.gif") no-repeat right -30px; top: 2px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLampWithImage li.back .left { background: url("../img/lava.gif") no-repeat top left; height: 30px; margin-right: 9px; /* 7px is the width of the rounded shape */ } .lavaLampWithImage li a { font: bold 14px arial; text-decoration: none; color: #fff; outline: none; text-align: center; top: -28px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 12px; } .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { border: none; }
------解决方案--------------------
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: -28px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 12px;
_margin: auto 6px;/*加这行试试*/
}