更改浏览器缩放时，CSS 选项卡菜单看起来很难看 [英] CSS tabs menu looks ugly when changing browser-zoom

问题描述

请看我的 CSS 标签菜单:http://jsfiddle.net/NoGo/3Spru/

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

标签是:首页 |用户 |地图

我的 HTML:

<div class="ym-wrapper"><div class="ym-wbox"><ul><li><a href="#"><div>首页 <i class="icon-home"></i></div><span>转到主页</span></a>
<div>用户 <i class="icon-search"></i></div><span>搜索用户帐户</span></a>
<li><a href="#"><div>地图 <i class="icon-globe"></i></div><span>您附近的用户</span></a>

<div class="ym-clearfix"></div>

</nav>

CSS:

标题导航{清楚:两者；宽度:100%；位置:相对；空白:nowrap；填充顶部:10px;边框底部:2px 实心 #CA278C；}标题导航{列表样式:无；填充:0;保证金:0;显示:内联；}标题导航 li {显示:内联块；边框顶部:2px 实心透明；边距:0 5px -2px 0；背景色:#f0f0f0；边框底部:2px 实心 #CA278C；行高:180%；}标题导航 li.active，标题导航 ul li:hover {边框顶部:2px 实心 #CA278C；边框底部:2px 实心 #fff;背景色:#fff;}标题导航 li.active {右边框:2px 实心 #CA278C；左边框:2px 实心 #CA278C；}标题导航 ul li a {显示:内联块；填充:5px 16px；}标题导航 ul li a div {文本转换:大写；字体粗细:粗体；字体大小:16px；}标题导航跨度{字体大小:11px；颜色:#999}标题导航 [class^="icon-"],标题导航 [class*=" icon-"] {垂直对齐:基线；行高:继承；不透明度:0.7；}

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

解决方案

我可以通过使用 子像素定位并将margin-bottom和border-width设置为-1.5px 和 1.5px 分别.它 在 jsFiddle 上看起来不错 - 用最少的努力 - 在 上100% 到接近 200% 的某个地方，您可能可以通过进一步降低子像素渲染路径，使其在其他缩放级别下看起来更好.

但后来我突然意识到你真的不需要在非活动标签上设置底部边框，只需将标签上的 margin-bottom 设置为 0px 然后将 .active 和 :hover 类的 margin-bottom 设置为 -2px.这在任何缩放级别上都会自动看起来很好，因为您根本不必担心排列线条".这里有一个用于这种方法的 jsFiddle.

header nav ul li {显示:内联块；边距:0 5px 0 0；边框顶部:2px 实心透明；背景色:#f0f0f0；行高:180%；位置:相对；}标题导航 li.active，标题导航 ul li:hover {边框顶部:2px 实心 #CA278C；边框底部:2px 实心 #FFF；背景色:#fff;底边距:-2px；}

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?

解决方案

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

这篇关于更改浏览器缩放时，CSS 选项卡菜单看起来很难看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！