Почему IE11 сбрасывает этот параметр поля, когда размер шрифта изменяется при наведении курсора?

0

Это странная ошибка, с которой я столкнулся. В 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; расположенный в .container_full, но я не могу просто удалить это, как это необходимо для других частей страницы. Это может быть связано с этим подобным вопросом, но я не уверен, что это на самом деле та же проблема.

Кто-нибудь имеет представление о том, почему это происходит, и кто-нибудь знает об обходном пути, который не включает удаление overflow:hidden; ?

  • 0
    Вы используете какой-либо "нормализовать" CSS?
  • 0
    @LeandroRuel Я не уверен, что это такое, поэтому я бы сказал, что, вероятно, нет. Я посмотрю, что это такое.
Показать ещё 7 комментариев
Теги:
internet-explorer-11

1 ответ

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню