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

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

如何更改CSS，使其在Safari和Chrome上呈现相同的效果？

1 个答案: