`display：none`仍然会留下打破布局的边框

Question

我正在研究动态菜单。我使用display:none添加和删除元素。

我注意到这会删除元素但不删除元素边框。像往常一样在CSS中我发现这很奇怪，不知道它是一个bug还是预期的行为以及它的工作原理。

这是菜单：

HTML

<nav id="top_menu">
  <ul>
    <li>
      <a id="main_nav" href="javascript:;">Favs</a>
    </li>
    <li>
      <a id="feed_nav" href="javascript:;">Feed</a>
    </li>
    <li>
      <a id="set_nav" href="javascript:;">Settings</a>
    </li>
    <li>
      <a id="fav_nav" href="javascript:;">MyFavs</a>
    </li>
    <li>
      <a id="so_nav" href="javascript:;">SignOn</a>
    </li>
  </ul>
</nav>

CSS

nav { 
  display: none; 
  width: 100%; 
  top: 40px; 
  z-index: 999;
}
nav ul li { 
  display: block;
  float: none; 
  border-bottom: 1px solid #000000; 
  border-left: none; 
}
nav ul li a { 
  display: block; 
  padding: 0 15px; 
  line-height: 40px; 
  color: #fff;
  color: #000;
}

这是我关闭2个按钮的地方

Backbone.on('user_sign_out', function() {
  self.E.so_nav.innerHTML = 'SignOn';      
  self.E.fav_nav.style.display = "none";
  self.E.set_nav.style.display = "none";
});

这就是它的样子：

我通过进入Chrome调试器并删除元素来验证这实际上是2个元素。这解决了调试器中的问题。

以下是我设置display:none

之前的样子

Answer 1

display:none使得事情完全不是渲染的一部分。

您的问题是，<li>元素上的边框包含<a>元素，而您只有<a>元素转向display:none。所以当然边框仍会显示......带边框的元素不是你转向display:none的元素。

Answer 2

为父级添加display:none;，因为您为<a>节点设置了此项，但父级<li>的{​​{1}}已设置边框。这就是为什么它不会消失。