Гибкое отображение CSS действует по-разному с одинаковыми элементами flex в Chrome

ProgramBox

Гибкое отображение CSS действует по-разному с одинаковыми элементами flex в Chrome

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css #layout #flexbox

#javascript #HTML #css #макет #flexbox

Вопрос:

У меня есть несколько одинаковых элементов flex, содержащих прямоугольник span с margin-right и text span масштабируемый из-за ограничения размера шрифта в браузерах, таких как Chrome. Я поместил их в контейнер flex, но я подумал, что некоторые из них некорректны в Chrome, без margin-right прямоугольника span , но Firefox в порядке.

 #flex-container {
  display: flex;
  width: 50px;
}

.flex-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  margin-right: 2.1875px;
  position: relative;
  height: 7px;
}

.rect {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: rgb(6, 74, 105);
  margin-right: 0.875px;
}

.text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.5);
  transform-origin: left center;
  width: 20.5px;
}

 <div id="flex-container">
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
</div>

Результат выполнения фрагмента кода тоже правильный. Но не в https://jsfiddle.net/xgahLv3k/1 /

Вот демонстрационное изображение image, прямоугольник второго элемента не имеет правого поля.

Как я могу это исправить? Спасибо!

1. Он такой крошечный, что невозможно определить, есть пробел или нет! Это фактический размер вашего сайта?

2. @FluffyKitten да, я должен сохранить небольшой размер. Так это вызвано слишком маленьким пространством?

3. @FluffyKitten о, я установил для rect span значение margin-right равным 1px, и теперь это работает хорошо! большое вам спасибо! вы хотите опубликовать ответ, чтобы я мог его принять?

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

5. @chandukomati Поскольку я не увидел пробелов в демонстрационном изображении, я назвал его no margin-right . Теперь я знаю, что это потому, что значение px слишком мало.

Ответ №1:

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

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

Приведенный ниже фрагмент использует целые пиксели для .flex-item и .rect следующим образом:

 .flex-item {
  margin-right: 2px;
  /* rest of CSS */
}

.rect {
  margin-right: 1px;
  /* rest of CSS */
}

Они были 2,1875 пикселей 0,875 пикселей, так что теперь в сумме получается примерно 3 пикселя

Рабочий фрагмент:

 #flex-container {
  display: flex;
  width: 50px;
}

.flex-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  margin-right: 2px;
  position: relative;
  height: 7px;
}

.rect {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: rgb(6, 74, 105);
  margin-right: 1px;
}
.text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.5);
  transform-origin: left center;
  width: 20px;
}

 <div id="flex-container">
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
  </div>

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

2. @soundquiet На мой взгляд, они выглядят нормально, и я проверил их с помощью инспектора элементов, и все они имеют размер ровно 5 пикселей * 5 пикселей. Я не уверен, почему вы видите их по-разному. Это не связано с квадратом, но для текста, почему вы используете шрифт 12, а затем масштабируете его на 50%? Размер шрифта 6 пикселей останется прежним без каких-либо потенциальных побочных эффектов масштабирования. Кроме того, ваш контейнер имеет размер всего 50 пикселей, что недостаточно широко для содержимого — в данный момент он переполнен, но это может вызвать проблемы, если у вас в проекте есть смежные элементы.

Ответ №2:

Если я правильно понимаю, пиксели — это наименьшая единица измерения, которую вы можете использовать. Это означает, что пиксели меньше 1 округляются либо до 0px, либо до 1px в зависимости от режима округления в браузере. В вашем случае rect класс имеет правое поле меньше 1 пикселя. Просто старайтесь избегать использования пикселя, который меньше 1px.