Question

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

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

这是完整的jsfiddle

这是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>

出于某种原因，LOGOUT链接在悬停时的顶部边框似乎比其他链接高一个像素。当我添加一些css reset script时，就会发生这种情况。

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

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

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

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

在IE7，IE8，最新的谷歌浏览器，最新的Firefox，最新的Opera上进行了测试。

Answer 1

你正试图以糟糕的方式设计它。尝试使用这样的样式 - 白色 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{}

Answer 2

你也可以试试这个

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

Answer 3

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

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

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

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

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

修复方法是将右侧的两个元素（用户名和注销）布局为浮动元素，或者将边距或行高调整为1-2 px（包括试错，呻吟）。

修复
通过调整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/

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

CSS重置脚本干扰1个链接

3 个答案: