html - li 和隐藏 div 上的 firefox 中的 css 大纲错误

Question

我有一个水平列表，我在其中放置 div，这些 div 在悬停之前一直隐藏。为了保持尺寸(隐藏的 div 是菜单的宽度)我正在使用 outline: 2px solid black; ，这适用于 ie 和 chrome，它概述了 li 元素但在 firefox 中它概述了整个 ul 项，包括隐藏的 div。

有没有人知道这个的解决方法，或者我是否与 firefox outline 有冲突？

CSS:

#marketmenu ul li{
   display: block;
   float: left;
   position: relative;
   cursor: pointer !important;
   z-index: inherit;
   font-size: 16px;
   padding-top: 2px;
   font-weight: bolder;
   width: 15%;
   height: 40px;
   text-align: center;
   background: white;
   outline: 2px solid black;   
}


#marketmenu ul li div {
   position: absolute;
   display: block;
   top: 98%;
   width: 600%;
   background: #ffffff;
   height: 200px;
   opacity: 0;
   visibility: hidden;
   overflow: hidden;
   z-index: 9;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border-radius: 0 0 3px 3px;
   -webkit-transition: all .3s ease .15s;
   -moz-transition: all .3s ease .15s;
   -o-transition: all .3s ease .15s;
   -ms-transition: all .3s ease .15s;
   transition: all .3s ease .15s;
}

html:

<div class="mheader-container"> 

    <div id="logo" class="clearfix">
        <a href="#"><img src="..."></a>
    </div>

    <div class="userstatus">
    <a href="#" class="mlogbuttons"><span class="icon-user-add"></span> Create an account</a>
    <a href="#" class="mlogbuttons"><span class="icon-user"></span> Log in</a>
    </div>
</div>

<div id="market_navigation" class="market_navigation clearfix">
        <div id="marketmenu">
            <ul>
                <li>one<div class="menudrop"></div></li>
                <li>two<div class="menudrop"></div></li>
                <li>three<div class="menudrop"></div></li>
                <li>four<div class="menudrop"></div></li>
                <li>five<div class="menudrop"></div></li>
                <li>six<div class="menudrop"></div></li>
            </ul>

        </div>      
</div>

jsfiddle(记住它只在 firefox 中有问题，在 ie/chrome 中呈现良好) http://jsfiddle.net/ww2rkexd/1/

Answer 1

在最后一个 li 元素上，添加一个类“last”:

<ul>
    <li>one<div class="menudrop"></div></li>
    <li>two<div class="menudrop"></div></li>
    <li>three<div class="menudrop"></div></li>
    <li>four<div class="menudrop"></div></li>
    <li>five<div class="menudrop"></div></li>
    <li class="last">six<div class="menudrop"></div></li>
</ul>

然后将 menudrop 类的 CSS 从轮廓更改为边框:

#marketmenu ul li{
  display: block;
  float: left;
  position: relative;
  cursor: pointer !important;
  z-index: inherit;
  font-size: 16px;
  padding-top: 2px;
  font-weight: bolder;
  width: 15%;
  height: 40px;
  text-align: center;
  background: white;
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

并为“last”类添加以下 CSS

li.last{
  border-right: 2px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}