css - 在 Firefox 和 IE 中重叠 1px 但在 Chrome 中不重叠

Question

在 Chrome 中，ul li ul 边框正好位于菜单 ul 的 de 边框之上，但在 Internet Explorer 和 Firefox 中，它偏离了 1px。

http://jsfiddle.net/5qasu929/

#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

一些更改应该使它在浏览器之间更加统一:

• 将position:relative;添加到#menu ul li，使子ul位置相对于它
• 将 top:50px; 添加到 #menu ul li ul。这与父 li
的 height 相同
• 从 #menu ul li ul
中删除 margin-top:16px;

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