Nano Hash - криптовалюты, майнинг, программирование

Текст переноса CSS не работает в IE

У меня возникли проблемы с некоторыми стилями, которые правильно работают как в Chrome, так и в Firefox, но не в IE.

Проблема, с которой я сталкиваюсь, в основном заключается в том, что определенный стиль отлично работает в Chrome, но не в IE. Текст не переносится в столбец.

Как это воспроизвести? Взгляните на эту скрипту сначала в Chrome или Firefox и затем сделайте это в IE.

введите здесь описание изображения

Чтобы упростить задачу, попробуйте прямо отсюда:

.Container {
  display: flex;
  text-align: center;
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}
.jc-center {
  justify-content: center;
}
.column-item-x2 {
  width: 50%;
}
.jc-start {
  justify-content: flex-start;
}
.resume-item {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 7px;
  display: inline-block;
  position: relative;
  font-size: medium;
  right: 15px;
}
.dot {
  position: relative;
  display: inline-block;
  align-self: center;
  border-radius: 10px;
  height: 12px;
  width: 12px;
  right: 37px;
}
.dot-skill {
  display: inline-block;
  align-self: center;
  border-radius: 15px;
  margin-right: 3px;
  height: 15px;
  width: 15px;
}
.skill {
  margin-right: 5px;
  margin-bottom: 5px;
}
<div id="resume" class="Container column" style=" margin-top: 50px;">
  <span style="textAlign: left; fontSize: 40px; color: red;">
          <input type="checkbox" id="Resume-chk" style="display: none;" />
          <b id="Resume-title">RESUME</b>
        </span>
  <hr />
  <div class="Container row jc-center" style="margin-top: 30px;">
    <div class="Container column jc-start column-item-x2" id="professional" style="color: red;">
      <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
        <div style="text-align: left;">
          <h2 style="color: red;">PROFESSIONAL</h2>

          <div class="Container column">
            <div class="Container row">
              <div class="dot" style="background-color: red;"></div>
              <div style={{ position: "relative" }}>
                <span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b></span>
              </div>
            </div>
            <div style="text-align: left;">
              <h3>Web.com</h3>
              <p style="color: gray;">
                <span>
							Actualmente trabajo como Engineer III Fullstack .NET en Web.com,
							una compañía con fuerte posición en el mercado norteamericano de eCommerce. <br />
							Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end
							del portal de ticketing de la compañía.
						</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Container column jc-start column-item-x2" id="personal" style="color: red;">
      <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px">
        <div style="text-align: left;">
          <h2 style="color: red;">SKILLS</h2>
          <div class="Container column">

            <div>
              <div class="Container row">
                <div class="dot" style="background-color: red;" />
                <div style="position: relative;">
                  <span class="resume-item" style="padding-left: 3px; padding-bottom: 6px; text-align: left; color: red;"><b>C#</b></span>
                </div>
              </div>
              <div class="Container row" style="margin-bottom: 20px;">
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: red;" />
                <div class="dot-skill" style="background-color: #B4B2B2;" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
        <div style="text-align: left;" }}>
          <h3 style="color: red;">OTHER_SKILLS</h3>
          <div class="Container row" style="margin-left: 15px; flex-wrap: wrap;" }}>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">TDD</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Scrum</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">MongoDB</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ElasticSearch</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Flux</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Firebase</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">.Net MVC 5</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">REST Services</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">SOA</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">OAuth</span>
            <span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ExpressJS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Большое спасибо.

03.02.2017

Ответы:


1

У IE есть проблема с переносом во flexbox.

Обычное исправление заключается в определении ширины контейнера.

Что не всегда понятно, так это: какой контейнер?

В этом случае эти настройки работают:

#professional > .row > div { width: 100%; }

#personal .row .row .row > div { width: 100%; }

исправленная скрипта

Связано: Почему IE11 не переносит текст во flexbox?

04.02.2017
  • Следует отметить, что если вы используете flex-direction: column, то в этом решении вам потребуется установить элемент height вместо width. 23.01.2019

  • 2

    попробуйте с:

    -ms-flex-wrap: wrap;
    
    flex-wrap: wrap;
    
    03.02.2017
  • К сожалению, это не сработало. Но по каким критериям вы получили это предложение? 03.02.2017
  • Новые материалы

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

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..