首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

IE6停margin效果不一致

2013-03-26 
IE6下margin效果不一致这是一个导航菜单的CSS,在除IE6的其他版本下.lavaLampWithImage li a的margin设置为

IE6下margin效果不一致
这是一个导航菜单的CSS,在除IE6的其他版本下.lavaLampWithImage li a的margin设置为auto 12px是正常显示的,但是在IE6下margin显示过大,后面的菜单被挤到第二行了。 只有把.lavaLampWithImage li a 的margin设置为auto 6px才能正常显示。。怎么解决这个问题呢?


.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;/*加这行试试*/

                    }

热点排行