Я использую один и тот же код на localhost и на моем сервере ElasticBeanstalk, где несколько классов используют проценты в качестве ширины. Документы MDN для процентного содержания говорят, что используются проценты.

для определения размера относительно родительского объекта элемента.

Тем не менее, во всем дереве DOM значения ширины в конечном итоге отклоняются на 0,005 (см. Рисунки). Я предполагаю, что размер корня приложения немного отличается, что вызывает небольшие различия при вычислении процентов. По мере того, как эти небольшие значения складываются, они могут создавать впечатление смещения объектов из желаемого положения.

Почему так происходит? И как я могу этого предотвратить?

Один из классов в качестве примера:

.student-profile-question-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 100%;
  min-width: 30%;
  max-width: 100%;
  z-index: 10;
}

Рисунок 1 для справки - localhost слева, а среда EB справа.

Изображение 2 для справки - вы можете ясно видеть, что левая сторона больше, но значение ширины такое же из-за округления

1
theneekz 26 Фев 2021 в 01:35

1 ответ

Лучший ответ

Как указано в Coll,

похоже, вы просматриваете два сайта с разными настройками масштабирования - Chrome может это легко сделать. «Просмотр -> Фактический размер» на обоих сайтах, чтобы определить, что вы просматриваете в реальном размере.

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

0
theneekz 26 Фев 2021 в 21:18