Html 更改浏览器缩放时，CSS选项卡菜单看起来很难看

请查看我的CSS选项卡菜单：

它使用YAML 4 CSS框架形式YAML.de（编辑2019：不再积极开发）

选项卡为：主页|用户|地图

我的HTML：

<nav>
    <div class="ym-wrapper">
        <div class="ym-wbox">
            <ul>
                <li>
                    <a href="#">
                        <div>Home <i class="icon-home"></i></div>
                        <span>Go to Main Page</span>
                    </a>
                </li>
                <li class="active">
                    <a href="#" class="">
                        <div>Users <i class="icon-search"></i></div>
                        <span>Search User Accounts</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>Map <i class="icon-globe"></i></div>
                        <span>Users near you</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="ym-clearfix"></div>
    </div>
</nav>

---

我的问题是：当我更改浏览器缩放时，底线看起来很难看。有没有比在

li

元素上使用

margin-bottom:-2px

更好的方法？

我可以通过使用

margin-bottom

和

border-width

分别设置为

-1.5px

和

1.5px

使它看起来更好的方法。它-以最小的努力-在

100%

上移动到接近

200%

的某个地方，您可能会通过进一步向下移动子像素渲染路径，使它在其他缩放级别上看起来更好

但后来我明白了，你不需要在非活动选项卡上设置底部边框，只要将选项卡上的

页边距底部设置为
0px
，然后将
页边距底部设置为
.active
和
：将
类悬停为
-2px
。这将自动在任何缩放级别上看起来都很好，因为您根本不必担心“排列线条”。对于这种方法

header nav ul li {
  display: inline-block;
  margin: 0 5px 0 0;
  border-top: 2px solid transparent;
  background-color: #f0f0f0;
  line-height: 180%;
  position: relative;
}
header nav ul li.active,
header nav ul li:hover {
  border-top: 2px solid #CA278C;
  border-bottom: 2px solid #FFF;
  background-color: #fff;
  margin-bottom: -2px;    
}

--这可以接受吗？@爆炸药丸：不，对不起，它破坏了“标签”的概念。你是什么意思？你发布的例子在100%zoomyours上看起来完全一样在我的firefox中是这样的：-我的是这样的：你的意思是它更短？是的，这似乎是最好的最简单的解决方案。谢谢！：-）
header nav ul li {
  display: inline-block;
  margin: 0 5px 0 0;
  border-top: 2px solid transparent;
  background-color: #f0f0f0;
  line-height: 180%;
  position: relative;
}
header nav ul li.active,
header nav ul li:hover {
  border-top: 2px solid #CA278C;
  border-bottom: 2px solid #FFF;
  background-color: #fff;
  margin-bottom: -2px;    
}