Почему одинаковая верстка и стили выглядят по разному на проде и на локальном сервере?

Question

[Soft_touch_plastic]

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

прод, нормально

локальный сервер, идентичные стили


Разумеется, везде чистил кэш, перезагружал браузер

Comments

[Dmitry Bay]

1) зум браузера.
2) Посмотрите файлы в консоли, вдруг не загружается что-то.

[Ankhena]

Стили-то может быть и идентичные, а вот контент явно нет.
С одинаковым контентом и прод уедет.

[wadowad]

Если верное отображение сверху, то нужно для элементов меню прописать:
white-space: nowrap;

[Александр Цымбал]

wadowad, тогда панелька будет непредсказуемо растягиваться по горизонтали, появится горизонтальный скролл.

[wadowad]

Александр Цымбал, если нужно чтобы убиралось, то либо фиксите отступы, либо обрезайте с помощью text-overflow: ellipsis, либо вообще раньше переходите на представление под узкие экраны.

[Александр Цымбал]

wadowad, вариантов исправления - масса. подход с nowrap не очень правильный изначально. Это костыль, который порождает еще костыли, обслуживающие его. Это не хорошо. Лучше на уровне дизайна решить вопрос. Например, числа в скобках выводить с position:absolute на цветной подложке (типа, индикаторов). Так ширина будет всегда одинаковой и изменяться только при изменении формулировок. Эти вещи дизайнеры должны продумывать. Но в нашем случае, думаю, обошлось без дизайнера, раз такие вещи в скобки убирают.

Answer 1

[Александр Цымбал]

Очень вероятно, что дело в количестве контента. Взгляните на локальную версию - там же в скобочках много цифр дописано. Они же добавляют ширину кнопкам. Вёрстка банально не рассчитана на это и "плывёт".
Попробуйте в инструментах разработчика почистить контент от цифр в скобках и взгляните на результат.