Ответ 1

Опять проблема IE11, которая кажется такой необычной. Я вижу, что процентное дополнение даже не рассчитано и не применяется в макете . Однако текст по-прежнему заполняется в соответствии с процентом заполнения. Поэтому я бы предположил, что текст позиционируется с заполнением, но после позиционирования процентное отступы "отключено".

Я не могу сказать, почему это происходит. Но если вы действительно хотите их исправить, вы можете использовать эти быстрые исправления.

Использовать маржу

Поскольку процентная ошибка возникает только при заполнении таблицы-ячейки, вы можете фактически использовать маркер для самого диапазона.

span 
{
    margin-left: 10%;
}

и, конечно, reset прокладка сторон:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

Это "решение" не так динамично, как процентное дополнение к самой таблице.

Почему бы и нет?
Это потому, что процент принимает значение из его родительского элемента, table-cell. Где, как ячейка таблицы, принимала это процентное значение на основе табуляции. Теперь, когда вы просто используете left-margin: 5%;. Это будет половина пространства, как и должно быть. Это связано с тем, что он занимает 10% от ширины таблицы. Если ширина таблицы-таблицы равна ширине таблицы, разделенной ее ячейками (table width / table cell).

Итак, чтобы исправить это, я сделал 5 раз количество ячеек (5 * 2 в этом случае), что приведет к правильному проценту.

Однако это не динамично, если вы хотите добавить больше ячеек.

jsFiddle

Использовать границу

Используйте границу, которую его позиция "зарезервирована" перед сбросом прокладки.

Зарезервированная граница

span 
{
     border-bottom: 1px solid transparent;   
}

Измените свойство, которое не нуждается в повторном вычислении позиции; цвет

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Теперь обратите внимание, что в макете по-прежнему не будет заполнения. Как только свойство присваивается, которое не было рассчитано до того, как заполнение сделало reset (то же самое время, когда будет определено положение текста), позиции будут пересчитаны.

jsFiddle

Я надеюсь, что одна из этих быстрых исправлений будет работать для вас.

Я вижу, что вы отправили отчет об ошибке в MS. Держите нас в курсе, когда вы получите ответ, я был бы признателен:)

Ответ 2

Странно, никто не упоминается, чтобы установить таблицу-макет: исправлено; Это действительно важно, иначе padding/width не будет правильно рассчитан на IE (и некоторые другие странные побочные эффекты, в зависимости от варианта использования), особенно когда вы используете изображения внутри него.

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

Ответ 3

Добавление невидимой верхней и нижней границ, кажется, устраняет проблему.

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

Ответ 4

У нас был похожий сценарий где ни одно из вышеперечисленных решений не работало.

Вместо этого мы анимируем ширину нашего затронутого div после загрузки страницы:

if (!!navigator.userAgent.match(/Trident\/7\./)){
            $("#karina-rosner2").animate({'width': '20.1%'},1);     
            $("#karina-rosner2").animate({'width': '20%'},1);   
}

Это заставляет IE11 пересчитать значение атрибута div и хорошо решить нашу проблему.

Ответ 5

Это может быть "полезно" решена путем установки таких правил CSS-paddding как: →

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Rememeber, чтобы установить это только для IE, так как он может заставить весь обычный браузер вести себя как дискотека.

EDIT: Flexbox работает для IE 10 и выше, поэтому это "решение" необходимо только для томов 9 и ниже.

Ответ 6

Все это действительно хорошие ответы, а опция медиа-запросов хорошо работает, чтобы идентифицировать только IE, у которого есть эта проблема с display:table-cell

То, что я делал так, как я нашел, работал хорошо, применяя вертикальное выравнивание, как отличный способ направить текст, содержащийся в элементе display:table-cell, туда, где я хотел, чтобы он находился. Обычно вертикальное выравнивание не сильно влияет на форматирование, ЕСЛИ оно не находится в таблице.

Вот мой упрощенный HTML:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

И вот CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

Вам также может потребоваться настроить li a:hover {line-height} в зависимости от того, что находится в вашем CSS для этих элементов.

Кроме того, если вы хотите, чтобы это работало для IE 9 и ниже, я предлагаю использовать условные комментарии, которые добавляют класс "ie" к тегу <html>, а затем создают таблицу стилей IE9. К счастью, стиль, необходимый для IE9, относительно одинаков. Но я тестировал только через IE9, и я не уверен в ваших результатах для IE8 и IE7.