如何更改我的 css 以使其在 Safari 和 Chrome 上呈现相同的效果？

Question

我最近设计了一个包含 html、css 和 javascript 的网站，但在不同浏览器上呈现时遇到了问题。它似乎在 Chrome 上运行良好，但在 Safari 上看起来一切都看起来很奇怪并且间隔很奇怪。我试过用 normalize.css 让它变得更好，但没有任何效果。我需要做些什么才能使它在 Safari 上也变得更好？

当我使用引导程序时，列出现的主要问题。如果我将该行分成 3 列，它将在 Chrome 上正确显示，但在 Safari 中将是 2 列和 1 列重叠在另一行上。我该如何解决这个问题？

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;){
}

对于您希望屏幕上的项目以不同方式放置的任何屏幕尺寸。