Блог

#css #layout #internet-explorer-11

#css #макет #internet-explorer-11

Вопрос:

 .outer{
  margin-top: 20px;
}
.parent{
  background: #02a;
  padding: 20px;
  display: inline-block;
}
.boxes {
  width: 80px;
  height: 80px;
  background: #999;
  display: inline-block;
  font-size: 12px;
}
.positioned {
  background: #0a0;
}
.boxes.relative{
  top: 15px;
  left: 20px;
}
.relative{
  position: relative;
}
.boxes.percent{
  background: red;
  left: 20%;
}
.block{
  display: block;
}  

 <div class='outer'>
  works correctly:
  <div class='parent'>
    <div class='boxes'>One</div>
    <div class='boxes positioned'>Two</div>
    <div class='boxes'>Three</div>
    <div class='boxes'>Four</div>
  </div>
</div>

<div class='outer'>
percentage value `left: 20%` doesn't work:
  <div class='parent'>
    <div class='boxes'>One</div>
    <div class='boxes positioned relative percent'>Two</div>
    <div class='boxes'>Three</div>
    <div class='boxes'>Four</div>
  </div>
</div>

<div class='outer'>
parent has `display: block`
  <div class='parent block'>
    <div class='boxes'>One</div>
    <div class='boxes positioned relative percent'>Two</div>
    <div class='boxes'>Three</div>
    <div class='boxes'>Four</div>
  </div>
</div>  

Комментарии:

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

2. не уверен, чего вы ожидаете. относительный coordonate переместит родительский элемент на столько на экране… но %, похоже, учитывает ширину родительского элемента. Это то, что вы хотите? преобразование: translatex (20%); переместит элемент на 20% от его собственного размера, и это отлично работает с IE. jsbin.com/fiyusitaca/1/edit?html ,css,js, вывод

3. спецификация developer.mozilla.org/en-US/docs/Web/CSS/position#relative говорит : relative The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. , так трансформироваться следует .

4. Большое спасибо, ребята, но это не объясняет, почему ie вообще не применяет значение левого процента. Все другие браузеры делают. Элемент, помеченный как «два», должен быть перемещен вправо на значение, отличное от 0, при этом не затрагивая его братьев и сестер. Он не отображает ожидаемое поведение.

5. Я пытаюсь протестировать проблему с IE 11, и я вижу в этом проблему. Основываясь на результатах моего теста, я обнаружил, что это может быть связано с padding тем, что вы установили для parent класса. Я заметил, что когда я удаляю его и снова применяю из инструментов разработчика, он отображает окно в нужном месте, поскольку оно отображается в других браузерах. Смотрите здесь . (Щелкните изображение после его открытия.) Я пытаюсь проверить любое возможное обходное решение, но не получил никакого рабочего обходного пути для этого. Я полагаю, вы можете предоставить Microsoft обратную связь по этому вопросу. Спасибо за понимание.

Ответ №1: