Question

这是我遇到过的一个奇怪的错误。在IE11中，它会首先正确设置上边距，直到我将鼠标悬停在重新调整大小的链接上。我这样做的那一刻，上边距似乎消失了，只有当我调整窗口（或框架）的宽度时才重新出现。

#upper_menu {
  background-color: #FFF;
  width: 100%;
}
.container_full {
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 0;
}
.container_12 {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
}
.container_12 .grid_10 {
  width: 81.333%;
}
#state_container ul {
  margin: 0;
  margin-top: 8.25%;
  padding: 0;
  list-style-type: none;
}
#state_container ul li {
  display: inline;
}
#state_container ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  vertical-align: text-top;
  color: #999999;
}
#state_container ul li a:hover {
  font-size: 1.55em;
  color: #000;
}
#state_container ul li .selected_state {
  font-size: 1.55em;
  color: #000000;
}

<div id="upper_menu" class="container_full">
  <div class="container_12">
    <div class="grid_10">
      <div id="state_container">
        <ul>
          <li><a href="#" class="selected_state">Connecticut</a>
          </li>
          <li><a href="#">New&nbsp;Hampshire</a>
          </li>
          <li><a href="#">New&nbsp;Jersey</a>
          </li>
          <li><a href="#">New&nbsp;York</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

（运行代码段时，使用全屏可以调整窗口大小，并在IE11中查看问题）

我尽可能地简化了它而不会丢失问题，因此我确定它似乎与最外层的div有关，特别是位于{{overflow:hidden;的{{1}} 1}}，但我不能删除它，因为它是页面其他部分所必需的。它可能与this similar question有关，但我不确定它实际上是同一个问题。

有没有人知道为什么会发生这种情况，有没有人知道不涉及删除.container_full的解决方法？

Answer 1

对我来说，这似乎是一个IE错误。从margin-top移除#state_container ul并在padding-top上将其添加为#state_container应解决此问题：

#state_container {
    padding-top:8.25%;
}
#state_container ul {
    margin:0;
    padding:0;
    list-style-type: none;
}

http://jsfiddle.net/hqNXg/5/

或者，根据您需要支持的浏览器，将%替换为vh可能是一个选项：

#state_container ul {
    margin:0;
    margin-top:8.2vh;
    padding:0;
    list-style-type: none;
}

http://jsfiddle.net/hqNXg/4
http://caniuse.com/#search=vh
http://snook.ca/archives/html_and_css/vm-vh-units

当字体在悬停时调整大小时，为什么IE11会丢弃此边距设置？

1 个答案: