Это спрашивается снова и снова (с различными комбинациями браузеров и движков рендеринга). Но на самом деле нет ответа. Вместо этого, вот несколько вещей, которые нужно иметь в виду, чтобы ваша работа выглядела более похожей в самых популярных браузерах и устройствах.
Один
Нет такого понятия, как полное пиксельное совершенство. Период. Даже если вам удастся достичь точки, когда снимок экрана, наложенный поверх исходного материала (Photoshop, Sketch и т. Д.), Идеально подходит, вы можете перейти на другой компьютер (тот же браузер и исходный материал) и не иметь его в строке вверх. Но даже это маловероятно, поскольку что-то вроде файла Photoshop по определению не может быть отзывчивым.
Два
Вы МОЖЕТЕ выровнять игровое поле, чтобы большинство браузеров обрабатывали ваш код одинаково. Чтобы сделать это, вы должны понимать, что каждый браузер имеет разные значения по умолчанию, а затем УДАЛИТЬ эти значения по умолчанию, чтобы ваш CSS представлял окончательный вариант решение. Есть два типичных способа сделать это:
Сброс CSS - они удаляют ВСЕ стили и заставляют вас создавать все.
CSS Normalize - попытка сделать базовый стиль одинаковым во всех браузерах. (Я использую нормализацию в КАЖДОМ проекте, который я делаю)
Три
Узнайте о CSS box-model. Относится к тому, как браузеры работают с «полями» margin / padding / content , которые составляют визуализированную HTML-страницу. Блочная модель, которую использует браузер, влияет на размеры и расстояние. Обычно Normalize исправляет это, но многие браузеры по умолчанию используют разные блочные модели.
Стоит также обратить внимание на плотность пикселей на экране (это влияет на что-либо с фиксированными размерами) и преобразовать в размерное соотношение в процентах (rem, vh/vw, %), чтобы все устройства начали отображать объекты как можно ближе к тому, что вы хотели, насколько это возможно.
Четыре
Узнайте о возможностях каждого браузера и запланируйте fallbacks или shims для восстановления / добавления функциональности в этих случаях. Во-первых, проверьте, что вы пытаетесь использовать с caniuse.com . Это сообщит вам, если вам нужно использовать запасной вариант, обнаружить недостающие функции или просто принять тот факт, что он не будет работать точно так, как вы хотите это везде.