Question

在Chrome中，ul ul ul边框与菜单ul的边界完全相同，但在Internet Explorer和Firefox中它的关闭时间为1px。

#menu ul li ul {
display:none;
position:absolute;
z-index:999;
height:auto;
margin-top:16px;
margin-left:-0px;
background-color:#EFEFEF;
border-bottom:1px solid #C7C7C7;
border-left:1px solid #C7C7C7;
border-right:1px solid #C7C7C7;
}
#menu ul li {
display:table-cell;
height:50px;
vertical-align:middle;
border-bottom:1px solid #C7C7C7;
margin-left:0;
}

我该如何解决这个问题？

Answer 1

使用css的border-box属性，

指定<li>元素应包含填充和边框元素的总宽度和高度：

#menu ul li {
    box-sizing:border-box;
    margin-top:-1px;
}

Answer 2

一些更改应该会使浏览器更加统一：

将position:relative;添加到#menu ul li以使子ul位置相对于此
将top:50px;添加到#menu ul li ul。这与父height

li

从margin-top:16px;

#menu ul li ul

#menu {
  width: 950px;
  margin: 0px auto;
  list-style: none;
  position: relative;
}
#menu ul {
  list-style: none;
  float: left;
}
#menu ul li {
  display: table-cell;
  height: 50px;
  vertical-align: middle;
  border-bottom: 1px solid #C7C7C7;
  margin-left: 0;
  position: relative; /*Add*/
}
#menu ul li a {
  font-size: 18px;
  color: #024fff;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  padding: 5px;
}
#menu ul li:hover {
  background-color: #E3E3E3;
  border-bottom: 1px solid #024fff;
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}
#menu ul li ul {
  display: none;
  position: absolute;
  z-index: 999;
  height: auto;
  /*margin-top:16px;Remove*/
  margin-left: -0px;
  background-color: #EFEFEF;
  border-bottom: 1px solid #C7C7C7;
  border-left: 1px solid #C7C7C7;
  border-right: 1px solid #C7C7C7;
  top: 50px;/*Add*/
}
#menu ul li:hover > ul {
  display: block;
  border-top: 1px solid #024fff;
}
#menu ul li ul li {
  min-width: 80px;
  display: block;
  height: 23px;
  padding: 9px 35px 0px 5px;
  border: 0px;
}
#menu ul li ul li:hover {
  border-bottom: 0px;
}
#menu ul li ul li:before {
  content: '- \00a0 ';
  color: #024fff;
}
#menu ul li ul li a {
  font-size: 16px;
  padding: 3px;
}

<div id="menu">
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Home2</a>
      <ul>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Home3</a>
    </li>
    <li><a href="#">Home4</a>
      <ul>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
        <li><a href="#">Sub1</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

您应该使用父A中的LI代码高度来定位子菜单

首先，将display:block and height:100%添加到A：

#menu ul li a {
    font-size:18px;
    color:#024fff;
    text-decoration:none;
    font-family: 'Raleway', sans-serif;
    padding:5px;
    display:block;
    height:100%;
}

删除李的身高（身高取决于A标签的字体大小和填充

#menu ul li {
    display:table-cell;
    height:auto;
    vertical-align:middle;
    border-bottom:1px solid #C7C7C7;
    margin-left:0;
}

最后删除margin-top toi子菜单：

#menu ul li ul {
    display:none;
    position:absolute;
    z-index:999;
    height:auto;
    /*margin-top:16px;*/
    margin-left:-0px;
    background-color:#EFEFEF;
    border-bottom:1px solid #C7C7C7;
    border-left:1px solid #C7C7C7;
    border-right:1px solid #C7C7C7;
}

阻止submenu > a成为display:block：

#menu ul li ul li a {
    font-size:16px;
    padding:3px;
    display:inline;
}

Live example

在Firefox和IE中重叠1px但在Chrome中没有重叠

3 个答案: