Question

我在IE中获得负余量时遇到了一些麻烦。我有一些＆＃34;标签＆＃34;水平布局，左边框为1px，左边距为-1px。这似乎在IE以外的所有浏览器中都能正常工作。

最右边的标签位于另一个标签下方。

有什么想法？

HTML

<div class="jNav button4">
<ul>
    <li class="active">
        <a href="#slide1"><p style="background-image: url(images/icn-unlim.png);"></p>Unlimited</a>
    </li>   

    <li>
        <a href="#slide2"><p style="background-image: url(images/icn-info.png);"></p>What you need to know...</a>
    </li>   

    <li>
        <a href="#slide3"><p style="background-image: url(images/icn-data.png);"></p>What can you do with a GB?</a>
    </li>   

    <li>
        <a href="#slide4"><p style="background-image: url(images/icn-choose.png);"></p>Explore your options</a>
    </li>                   
</ul>
</div>

CSS

    .jNav ul{
    overflow: hidden;
    border-bottom: solid 1px #ccc;
}
.button3 ul li{
        width: 33.3%;
}

.button4 ul li{
        width: 25%;

}

.button5 ul li{
        width: 20%;
}

.jNav ul li{
    text-align: center;
    display: inline-block;
    margin: 0px;
    float: left;
    background-color: #f4f4f4;
    border-top: solid 3px #ccc;

}

.jNav ul li + li {
    border-left: solid 1px #ccc;
    margin-left: -1px;
}

.jNav ul li a{
    display: block;
    color: #666;
    opacity: .5;
    padding:10px 0px;

}

.jNav ul li a:focus {
    opacity: 1;}

.jNav ul li a:hover{
    display: block;
    text-decoration: none;
    opacity: 1;
    border-top: solid 3px #ccc;
    padding-bottom: 7px;
}

.jNav ul .active{
    border-top: solid 3px #ff7200;
    background-color: #fff;
}

.jNav ul .active a{
    color: #ff7200;
    opacity: 1;

}

.jNav ul .active a:hover{
    padding:10px 0px;
    border-top: none;
}


.jNav ul .active p{
    background:no-repeat top center;
}

.jNav ul li a p{
    height:50px;
    width: 50px;
    text-align: center;
    background:no-repeat bottom center;
    margin: 10px auto;
}

Answer 1

尝试使用：）

.jNav ul li + li {
    border-left: solid 1px #ccc;
    /*margin-left: -1px;*/
   position: relative;
   left: -1px;
}

或者，你可以像这样使用（不需要重新布局css）：

.jNav ul li + li {
    border-left: solid 1px #ccc;
    margin-left: -1px;
   position: relative;
   zoom: 1;
}

负边距不在IE中工作

1 个答案: