-1

我有一个菜单，可以在下面的链接中看到：

http://fiddle.jshell.net/V88c6/8/show/

这是完整的jsfiddle

http://jsfiddle.net/V88c6/8/

这是HTML

<div id="head_1">
    <div class="inner">

        <div class="column_0">
            LOGO
        </div>

        <div class="column_1">
            <a href="#" class="menu_link">LINK 1</a>
            <a href="#" class="menu_link">LINK 2</a>
            <a href="#" class="menu_link">LINK 3</a>
            <a href="#" class="menu_link">LINK 4</a>
        </div>

        <div class="column_2">
            <span>USER NAME</span> <a href="#" class="menu_link">LOGOUT</a>
        </div>

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

    </div>
</div>

由于某种原因，悬停时注销链接的顶部边框似乎比其他链接高一个像素。这发生在我添加一些css 重置脚本时。

这是没有 css 重置的同一页面的链接，其中 LOGOUT 链接可以正常工作：

http://fiddle.jshell.net/V88c6/9/show/

我喜欢使用 css 重置脚本来帮助页面在大多数流行浏览器上看起来相似。

任何人都知道为什么 css 重置脚本只会干扰 LOGOUT 链接吗？

在 IE7、IE8、最新的 Google Chrome、最新的 Firefox、最新的 Opera 上测试。

4

3 回答 3

1

你正试图以糟糕的方式设计它。尝试像这样设计它 - whit li ul：

<div class="column_1">

 <ul class="menu_link">
 <li><a href="#" >LINK 1</a></li>
 <li><a href="#" >LINK 2</a></li>
 <li><a href="#" >LINK 3</a></li>
 <li><a href="#" >LINK 4</a></li>
 <ul>

</div>

<div class="column_2">

 <ul class="menu_link">
 <li>username</li>
 <li><a href="#" >LINK 4</a></li>
 <ul>

</div>

这些是选择器：

.menu_link li{}
.menu_link li a{}
于 2013-05-01T11:47:39.967 回答
0

你也可以试试这个

#head_1 .inner .column_2 {
display: block;
float: right;
padding: 0 15px;
}

#head_1 .inner .column_2 .menu_link {
border-top: 17px solid transparent;
padding: 17px 15px 10px 15px;
display: inline-block;}
于 2013-05-01T11:57:58.933 回答
0

问题与display属性的计算值有关。

带有“LINK 1”等的中间列显示.menu-link为float: left，这会导致<a>元素被阻塞而不是内联。

您的“LOGOUT”链接显示.menu-link没有浮动，因此该<a>元素是内联的。

内联元素影响其内联框的高度与块元素不同。

浏览器的默认样式表中有一些样式属性掩盖了这种效果，当您使用重置 CSS 样式表时，它会出现。

解决方法是将右侧的两个元素（用户名和注销）布局为浮动元素，或者将边距或行高调整 1-2 像素（涉及反复试验，呻吟）。

修复
我可以通过如下调整 CSS 来获得一致的布局：

#head_1 .inner .column_2 {
    display:block;
    float:right;
    /* padding:34px 0px 10px 15px; Remove this... */    
}

#head_1 .inner .column_2 .menu_link{
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left; /* add this.. */
}

/* Float your span like you floated the link... */
#head_1 .inner .column_2 span {
    border-top:17px solid transparent;
    padding:17px 15px 10px 15px;    
    float: left;
}

小提琴：http: //jsfiddle.net/audetwebdesign/Myhcy/

关键是在布置两个菜单时保持一致的编码风格。

于 2013-05-01T12:01:25.483 回答