Question

这似乎只是IE中的一个问题。 Chrome和Firefox似乎运行良好。

我正在使用IE11

我在菜单中注意到最后一个菜单项上有一点微小的灰色模糊。删除border-radius会解决它，但我更愿意保留它。

项目1周围的曲线看起来很好，因为项目5周围的曲线有一个从曲线突出的轻微变色。

我也意识到整体结构不太理想，但这就是目前或多或少的设置方式。我宁愿不用改变html

.navigation{
    display:inline-block;
    margin:0;
    list-style-type:none;
}



.navigation > li >a{
    border-right:1px solid white;
    background-color: rgb(0,68,106);
    color: #ffffff;
    padding: 4px 6px 4px 6px;
    display:inline-block;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}

.navigation ul{
    display:inline-block;
    padding-left:0px;
    list-style-type:none;
}

.navigation ul li{
    display:inline-block;
}

.navigation ul li a{
    border-right:1px solid white;
    background-color: rgb(0,68,106);
    color: #ffffff;
    padding: 4px 6px 4px 6px;
    display:inline-block;    
}

.navigation ul li:last-child a{
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
}

<ul class= "navigation">
    <li><a href="#">item 1</a>
        <ul>
            <li><a href="#">item 2</a></li>
             <li><a href="#">item 3</a></li>
             <li><a href="#">item 4</a></li>
             <li><a href="#">item 5</a></li>
    </li>
    </ul>

Answer 1

此规则导致问题，您似乎不需要它。你可以删除它。

.navigation ul li a{
    border-right:1px solid white;
}

.navigation{
    display:inline-block;
    margin:0;
    list-style-type:none;
}



.navigation > li >a{
    border-right:1px solid white;
    background-color: rgb(0,68,106);
    color: #ffffff;
    padding: 4px 6px 4px 6px;
    display:inline-block;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}

.navigation ul{
    display:inline-block;
    padding-left:0px;
    list-style-type:none;
}

.navigation ul li{
    display:inline-block;
}

.navigation ul li a{
    /* this is messing you up */
    /* border-right:1px solid white; */
    background-color: rgb(0,68,106);
    color: #ffffff;
    padding: 4px 6px 4px 6px;
    display:inline-block;    
}

.navigation ul li:last-child a{
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
}

<ul class= "navigation">
    <li><a href="#">item 1</a>
        <ul>
            <li><a href="#">item 2</a></li>
             <li><a href="#">item 3</a></li>
             <li><a href="#">item 4</a></li>
             <li><a href="#">item 5</a></li>
        </ul>
    </li>
</ul>

菜单上的微小模糊像素化变色

1 个答案: