如何更改我的 css，使其在 Safari 和 Chrome 上呈现相同

Question

我最近设计了一个包含html，css和javascript的网站，但是在不同的浏览器上呈现时遇到了问题。它似乎在Chrome上工作正常，但一切看起来都不对劲，并且在Safari上间隔很奇怪。我尝试使用规范化.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;){
}

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