Блог

Главная - Вопросы по программированию - Flexbox работает нормально в Chrome, но не в Firefox

Flexbox работает нормально в Chrome, но не в Firefox

#css #firefox #flexbox

#css #firefox #flexbox

Вопрос:

Я разработал свой веб-сайт-портфолио в Google Chrome, и на нем все выглядело нормально. Вот как выглядит моя страница «О программе» в Chrome: веб-страница в Chrome

Я проверил Firefox, чтобы посмотреть, все ли в порядке и в этом, но это не так. Вот как выглядит моя страница «О программе» в Firefox: веб-страница в Firefox

Я включил свой код ниже, но просто для того, чтобы дать краткое представление о содержимом, там есть about-container , который представляет собой столбец flexbox. Он содержит about-title и about-content . about-content есть еще один столбец flexbox, и в нем есть about-table который содержит текст и картинку, и card который содержит мою контактную информацию.

Что-то не так с моим flexbox? Почему это работает в Chrome, но не в Firefox?

 #about-container {
  display: flex;
  flex-direction: column;
  font-family: Roboto, sans-serif;
  min-height: 100vh;
}

.about-title {
  text-align: center;
  font-weight: bold;
  color: #374457;
  font-size: 3em;
  padding: 0.35em;
  font-family: Roboto, sans-serif;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-content p {
  line-height: 1.5em;
  font-size: 1.5em;
  text-align: left;
}

.about-content .about-table {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
}  
 <div id="about-container">
  <div class="about-title">About Me</div>
  <div class="about-content">
    <div class="about-table">
      <div style="padding-right: 5em;">
        <div>
          <p>Lorem ipsum dolor sit amet ... TRUNCATED</p>
        </div>
      </div>
      <img id="header-image" src="https://via.placeholder.com/300">
      <be>
    </div>
    <div class="card">
      <div class="card-header">
        <div class="card-title">Contact Information</div>
      </div>
      <div class="card-date">Get in touch with me</div>
      <div class="card-content">
        <div class="card-details">
          <div class="normal-text">
            <ul style="list-style-type: none; padding-left: 0px; margin-left: 0px; line-height: 250%;">
              <li><i aria-hidden="true" class="mail circular icon"></i> loremus99@gmail.com</li>
              <li><i aria-hidden="true" class="linkedin circular icon"></i><a href="https://www.linkedin.com/in/loremus99/" target="_blank" rel="noopener noreferrer"> /in/loremus99/</a></li>
              <li><i aria-hidden="true" class="facebook circular icon"></i><a href="https://www.facebook.com/lorem1999" target="_blank" rel="noopener noreferrer"> /lorem1999</a></li>
              <li><i aria-hidden="true" class="instagram circular icon"></i> _lorem</li>
              <li><i aria-hidden="true" class="snapchat ghost circular icon"></i> loremus99</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

1. без фактического кода рендеринга трудно сказать, что ваш общий код ничего не значит

2. Извините, обновлено.