CSS tabs menu looks ugly when changing browser-zoom

问题

Please look at my CSS Tabs menu: http://jsfiddle.net/NoGo/3Spru/

It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: not actively developed anymore)

The Tabs are: Home | Users | Map

My 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>

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

My problem: When I change browser zoom, the bottom-line looks ugly. Is there a better way than working with margin-bottom: -2px on li elements?

回答1:

I could get it to look a lot better by using subpixel positioning and setting the margin-bottom and border-width to -1.5px and 1.5px respectively. It looks fine here at jsFiddle - with minimal effort - on 100% up to somewhere close to 200%, and you could probably get it to look even better at other zoom levels by going further down the subpixel rendering path.

But then it dawned on me that you don't really need to have that bottom border on the inactive tabs, just set the margin-bottom on the tabs to 0px and then set the margin-bottom at the .active and :hover class to -2px. This will automatically look fine on any zoom level, as you won't have to worry about 'lineing up the lines' at all. Here's a jsFiddle for this approach.

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

来源：https://stackoverflow.com/questions/16408136/css-tabs-menu-looks-ugly-when-changing-browser-zoom