Почему верстка может по-разному отображаться в разных браузерах (кроссбраузерность)

Разные браузеры используют разные движки рендеринга (Blink в Chrome, Gecko в Firefox, WebKit в Safari), которые могут интерпретировать CSS и JS по-своему. Также влияют:

1. Префиксы CSS
   Некоторые свойства требуют вендорных префиксов (-webkit-, -moz-):

   .box {
     -webkit-border-radius: 5px; /* Старые Safari */
     -moz-border-radius: 5px;    /* Firefox */
     border-radius: 5px;         /* Современные браузеры */
   }

2. Поддержка фич
   Например, gap в Flexbox раньше работал только в Firefox.

3. Разные версии стандартов
   Браузеры могут реализовывать новые API с задержкой (например, WebGPU).

Как избежать:

• Используйте Autoprefixer для CSS
• Проверяйте поддержку на caniuse.com
• Тестируйте в кросс-браузерных инструментах (BrowserStack)
• Применяйте полифиллы для JS (например, core-js)