Как изменить мой CSS, чтобы он отображался одинаково в Safari и Chrome?

Question

Недавно я разработал веб-сайт с использованием html, css и javascript, и у меня возникли проблемы с рендерингом в разных браузерах. Кажется, он отлично работает на Chrome, но в Safari все выглядит странно и странно. Я пытался использовать normalize.css, чтобы сделать его лучше, но ничего не работает. Что мне нужно сделать, чтобы сделать это хорошо и в Safari?

Основные проблемы возникают со столбцами при использовании начальной загрузки. Если я разделю строку на 3 столбца, она будет правильно отображаться в Chrome, но будет 2 столбца и 1 перекрывается с другой строкой в ​​Safari. Как мне это исправить?

index.html

<div class="panel">
    <div id="panel-title" class="panel-title text-center">PANEL TITLE</div>
        <div class="container-fluid">
            <div class="row more-info">
                <div class="col-md-4 col-xs-12 text-center">
                    <img class="icon-images" src="img/image1.png">
                </div>
                <div class="col-md-4 col-xs-12 text-center">
                    <img class="icon-images" src="img/image2.png">
                </div>
                <div class="col-md-4 col-xs-12 text-center">
                    <img class="icon-images" src="img/image3.png">
                </div>
            </div>
        </div>
    </div>
</div>

style.css

.panel {
    padding-bottom: 50px;
    padding-top: 50px;
    background: url("img/howitworksbg.png");
    background-repeat: no-repeat;

}

# panel-title {
    background: -webkit-linear-gradient(#f5ce8a, #eb9c14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container-fluid {
    padding: 0;
}

.more-info {
    padding: 0 150px 0 150px;
}

Answer 1

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

@media screen and(max-width: 500px;){
}

Для экрана любого размера, который вы хотите разместить на экране по-разному.