Ширина содержимого Flex неправильно рассчитана внутри позиции: фиксированный контейнер в IE11 - PullRequest
Новая
       19

Ширина содержимого Flex неправильно рассчитана внутри позиции: фиксированный контейнер в IE11

0 голосов
/ 12 сентября 2018

Я создаю пользовательскую подсказку, которая использует position: fixed и динамические top и left, чтобы следовать за курсором мыши. Всплывающая подсказка имеет относительно сложную компоновку с помощью flexbox. У меня проблема с IE11 (который в остальном прекрасно поддерживает flexbox с использованием автоприставки), когда ширина всплывающей подсказки сворачивается, как будто в ней нет содержимого.

Я сделал Codepen, убрав все детали моей реализации, за исключением самой базовой схемы Bootstrap и CSS, и проблема все еще присутствует. Вы можете увидеть это в действии здесь https://codepen.io/ryangiglio/pen/xajLJr. Вот код:

HTML 

<!-- Regular content -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
  </div>
</div>

<!-- Tooltip content -->
<div class="custom-tooltip">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 text-center">
        Tooltip Title
      </div>
    </div>
    <div class="row">
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
    </div>
  </div>
</div>

CSS 

.custom-tooltip {
  position: fixed;
  top: 50px;
  left: 50px;
  background: white;
  box-shadow: 0 0 5px 1px black;
}

Вот так это выглядит в Chrome

Chrome

А как это выглядит в IE11

IE11

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

К сожалению, я не заботился о лежащей в основе проблеме здесь, чтобы тратить слишком много времени на ее решение, поэтому я в конечном итоге жестко закодировал ширину класса .custom-tooltip, который решил проблему достаточно для того, чтобы я ее отправил.

0 голосов
/ 12 сентября 2018

Указанная вами ссылка недействительна, потому что я не профессиональный участник.

С другой стороны, я не уверен, но может случиться так, что когда вы устанавливаете свойство box shadow, оно меняет отображение, но я не уверен и хотел проверить эту теорию, но не смог.
--- Отредактировано
Попробуйте приведенный ниже код и убедитесь, что вы правильно установили свойство flex-direction. 

div.custom-tooltip{ 
  display: flex; 
  flex-direction:column; 
} 
div.row{ 
  display: flex; 
  flex-direction:row; 
}

--- EDITED ANSWER ---

/* 
I set the tooltip box containers 
width to be a percentage, I don't
know if this a documented issue 
with ie11 or not, where ie 11
doesn't realize that flex is being 
used on a fixed element and goes with
default values for width.  

*/
div[data-tooltip-boxwidth="300"] {
 width: 20%;
}
...