Question

我正在尝试实现如下的导航菜单。黑色/红色按钮与标题的border-bottom属性之间不应有空格。特别是Safari浏览器会遇到麻烦。边界与导航项目之间存在很大差距。

以下是我的HTML和CSS的片段：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

a:link, a:visited { color:#7C7C7C; text-decoration:none; }
header { border-bottom:1px solid #000000; }
.wrapper { margin:0 auto; }
.menu { list-style:none; margin:0; padding:0; }
#header-nav { margin-top:3.5rem; }
#menu-main > li { float:left; }
#menu-main > li a { padding:0.2rem 0.8rem; line-height:1.71rem; height:1.71rem; }
#menu-main > li:hover a,
#menu-main > li.active a { color: #ffffff; background-color:#000000; }
#menu-main li:last-child { float:right; }
#menu-main li:last-child a { color:#ffffff; background-color:#ef2318; }

<header>
    <div class="wrapper">
    	<nav id="header-nav">
    		<ul id="menu-main" class="menu clearfix">
    			<li class="active"><a href="#">Home</a></li>
    			<li><a href="#">How To</a></li>
    			<li><a href="#">Shop</a></li>
    			<li><a href="#">Misc</a></li>
    			<li><a href="#">Basket</a></li>
    			<li><a href="#">Special Button</a></li>
    		</ul>
    	</nav>
    </div>
</header>

Answer 1

如果我理解正确的话：我只是让行高更小：

1.71 - ＆gt; 1.4 #menu-main > li a

＆＃13;

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

a:link, a:visited { color:#7C7C7C; text-decoration:none; }
header { border-bottom:1px solid #000000; }
.wrapper { margin:0 auto; }
.menu { list-style:none; margin:0; padding:0; }
#header-nav { margin-top:3.5rem; }
#menu-main > li { float:left;padding-top:0;}
#menu-main > li a { padding:0.2rem 0.8rem; line-height:1.4rem; height:1.71rem; }
#menu-main > li:hover a,
#menu-main > li.active a { color: #ffffff; background-color:#000000; }
#menu-main li:last-child { float:right; }
#menu-main li:last-child a { color:#ffffff; background-color:#ef2318; }

＆＃13;

<header>
        <div class="wrapper">
        	<nav id="header-nav">
        		<ul id="menu-main" class="menu clearfix">
        			<li><a href="#">Home</a></li>
        			<li><a href="#">How To</a>
</li>
        			<li class="active"><a href="#">Shop</a>
</li>
        			<li><a href="#">Misc</a>
</li>
        			<li><a href="#">Basket</a>
</li>
        			<li><a href="#">Special Button</a>
</li>
        		</ul>
        	</nav>
        </div>
    </header>

＆＃13;

Answer 2

问题是因为填充值在不同浏览器中的呈现方式不同。目前你的css中的这一行遇到了填充问题。

#menu-main > li a 
 {
    padding:0.2rem 0.8rem;
    line-height:1.71rem;
    height:1.71rem;
 }

解决此问题的一种方法是在使用填充的元素中使用 box-sizing css属性。但是在你的代码中它已经被使用了。

其他方式是使用 display：block ，以下是如何使用它：

#menu-main > li a
 {
    display:block;
    padding:0rem 0.8rem;
    line-height:1.71rem;
    height:1.71rem;
 }

请注意，在这种情况下，您不需要顶部或底部的填充，因此请将其设为0。

这是Fiddle。

Crossbrowser将菜单对齐到标题的底部

2 个答案: