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

Question

请查看我的 CSS 选项卡菜单:http://jsfiddle.net/NoGo/3Spru/

它使用 YAML 4 CSS 框架形式 yaml.de(编辑 2019:不再积极开发)

选项卡是:主页 |用户 | map

我的 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>

CSS:

header nav {
    clear: both;
    width:100%;
    position:relative;
    white-space: nowrap;
    padding-top:10px;
    border-bottom: 2px solid #CA278C;
}
header nav ul {
    list-style: none;
    padding:0;
    margin:0;
    display:inline;
}
header nav ul li {
    display: inline-block;
    border-top: 2px solid transparent;
    margin: 0 5px -2px 0;
    background-color: #f0f0f0;
    border-bottom: 2px solid #CA278C;
    line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
    border-top: 2px solid #CA278C;
    border-bottom: 2px solid #fff;
    background-color: #fff;
}
header nav ul li.active {
    border-right: 2px solid #CA278C;
    border-left: 2px solid #CA278C;
}
header nav ul li a {
    display: inline-block;
    padding: 5px 16px;
}
header nav ul li a div {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}
header nav ul li a span {
    font-size: 11px;
    color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
    vertical-align: baseline;
    line-height: inherit;
    opacity: 0.7;
}

我的问题:当我更改浏览器缩放比例时，底线看起来很难看。有没有比在 li 元素上使用 margin-bottom: -2px 更好的方法？

Answer 1

我可以通过使用 subpixel positioning 让它看起来更好看并将 margin-bottom 和 border-width 分别设置为 -1.5px 和 1.5px。它looks fine here at jsFiddle - 以最小的努力 - 在 100% 上达到接近 200% 的某个位置，您可以通过进一步向下移动子像素使其在其他缩放级别上看起来更好渲染路径。

但后来我突然意识到，您真的不需要在非事件选项卡上设置底部边框，只需将选项卡上的 margin-bottom 设置为 0px 然后将 .active 和 :hover 类的 margin-bottom 设置为 -2px。这将自动在任何缩放级别上看起来都很好，因为您根本不必担心“对齐线条”。 Here's a jsFiddle对于这种方法。

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;    
}