Why does IE11 drop this margin setting when the font resizes on hover?

Question

This is an odd bug that I've encountered. In IE11, it will set the top margin correctly at first, until I hover over a link that re-sizes. The moment I do that, the top margin seems to disappear, only to reappear if I adjust the width of the window (or frame).

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

(When running the snippet, use full screen to be able to resize the window, and view the issue in IE11)

I've simplified it as much as I can without losing the issue, and because of that I've determined that it seems to have something to do with the outermost div, specifically the overflow:hidden; located in .container_full, but I cannot just remove that as it is necessary for other parts of the page. It may be related to this similar question, but I'm not certain that it is in fact the same issue.

Does anyone have any insight as to why this happens, and does anyone know of a workaround that doesn't involve removing overflow:hidden;?

Answer 1

Looks like an IE bug to me. Removing margin-top from #state_container ul and adding it as padding-top on #state_container should work around the problem:

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

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

Alternatively, depending on which browsers you need to support, replacing % with vh might be an option:

#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