Как делать кроссбраузерную верстку?

Question

[Никита Сальников]

Как делать кроссбраузерную верстку?
В chrome отображается нормально, в опере и IE вообще почти все ломается.

Comments

[Антон Литвиненко]

Для ие нужно писать дополнительно стили, чтобы получилось похоже. Прям вот отдельный файл где вместо гридов будут флоаты. А в опере не должно ломаться, если конечно вы не забываете про вендорные префиксы для новых свойств

[Никита Сальников]

У меня гридов нет. Только флексы, марджины, паддинги. Как через префиксы обращаться к флексам. И прочему? Даже в intellisince они не показываются. А для ИЕ вообще отдельный css файл создать и прописывать?

[Ankhena]

Подскажите как делать кроссбраузерную верстку. Нигде не могу найти ответ на этот вопрос.

Для начала подключить к проекту автопрефиксер, желательно в виде плагина к сборщику. Ручками копировать туда сюда css будет утомительно.
В исходном, рабочем, коде префиксов быть не должно.

Потом, открываете браузер, смотрите что сломалось. Гуглите почему сломалось, если это не очевидно сразу. Исправляете.

в chrome отображается нормально, в опере

У хрома и оперы один движок.
И то, что вы говорите очень странно.

[Никита Сальников]

Ankhena, я выше специально скинул два скрина, один нормальный в хроме, второй в опере

[Yupiter7575]

Никита Сальников, Зачем верстать под ie? ,_,

На втором скрине у вас походу с масштабом что-то

[Никита Сальников]

Yupiter7575, Нет с масштабом все ок. Я его просто уменьшил чтобы показать, что в опере элементы выстроились в колонну а не в ряд

[Никита Сальников]

Yupiter7575, а что под ИЕ не надо верстать? Разные люди используют разные браузеры.

[Ankhena]

Никита Сальников,

я выше специально скинул два скрина, один нормальный в хроме, второй в опере

У них очевидно разный масштаб.
Если приведете их к единому виду, то и картину получите одинаковую.

Либо давайте песочницу или ссылку на сайт.

а что под ИЕ не надо верстать? Разные люди используют разные браузеры.

Имеет смысл научиться. Наверное, всегда будут "оригинальные" браузеры.
Но в современных ТЗ ИЕ встречается всё реже и реже.

[Yupiter7575]

Никита Сальников, Таких людей кот наплакал (особенно в снг). Подойдите к любому человеку на улице и спросите хотя бы "что такое internet explorer", они покрутят пальцем возле виска и уйдут быстрым шагом.

[Никита Сальников]

Ankhena, ну вот и я о том же что научиться все же надо, мало ли. Лишние знания не помешают.

[Никита Сальников]

Ankhena, По поводу масштаба, что вы имеете ввиду? Я просто уменьшил масштаб скрина, когда делал картинку в пэинте.

[Ankhena]

Никита Сальников, во-первых, проверьте, чтобы у окна браузера масштаб был 100%.
Во-вторых,чтобы в настройках системы тоже стояло 100%. По идее, опера и хром одинаково должны на неё реагировать, но проверить нужно.

Или при 100% в браузерах откройте https://www.esolutions.se/en/test и сравните вьюпорты

[Алекс Глебов]

Сетка бутстрапа работает везде и может стать надёжным скелетом верстки.

По остальным моментам - переделывать другим способом, пока не заработает во всех нужных браузерах. С опытом будете сразу верстать чтоб работало.

Answer 1

[Vladislav]

если вы не используете gulp сборку, то найдите в интернете готовую с разными плагинами, в том числе и autoprefixer, browsersync и будет вам счастье, если сложно будет разобраться в сборке, то посмотрите этот урок https://youtu.be/SVmnfkICqq0
Так же есть смысл поддерживать только ie 11, так как эту версию поддерживать проще, а вообще лучше забить на ie и поддерживать Chrome, safari, yandex browser, edge, mozilla Firefox, но выбор за вами и конечно заказчиком