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

【问题标题】：Why does IE11 drop this margin setting when the font resizes on hover?当字体在悬停时调整大小时，为什么 IE11 会放弃此边距设置？
【发布时间】：2014-09-27 02:02:20
【问题描述】：

这是我遇到的一个奇怪的错误。在 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>

（运行sn-p时，全屏可以调整窗口大小，在IE11查看问题）

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

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

【问题讨论】：

你正在使用任何“规范化”的 CSS 吗？
@LeandroRuel 我不确定那是什么，所以我不得不说可能不是。不过我会查一下是什么。
@LeandroRuel 你的意思是css重置吗？如果是这样，那么是的，我是。
酷，你的重置有这个> *{box-sizing: border-box; } ?
@LeandroRuel 它没有，但添加它没有任何区别。

标签： html css internet-explorer-11

【解决方案1】：

对我来说看起来像是一个 IE 错误。从#state_container ul 中删除margin-top 并将其添加为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

【讨论】：