CSS WordPress 浏览器

Question

我的网络浏览器 Safari 有问题，我在 Chrome、FireFox 中测试了我的网站。 Safari 版本也是正确的，但是，当需要在 1920x1080 或更高分辨率下对其进行测试时，它无法正常工作(页 footer 分)。 我使用的主题是 wp-simple，这是我这部分的 CSS

@media screen and (min-width : 1920px)
{
    .home .footer>div
    {
        width:100.7%;
        margin-left:-21%;
        margin-bottom:-9.6%;
    }

    p#copyright
    {
        margin-bottom:8%;
    }

    ::i-block-chrome, .home .footer > div
    {
        margin-left:-21% !important;
        margin-bottom:-8.9% !important;
    }
}

我网站的链接:http://joelgobeil.ca/service/

Answer 1

您好，我发现 Chrome 也出现了这个问题，所以我测试了以下内容 Chrome 。

我将以下 CSS 行添加到现有的行中。

div.container.footer {
    max-width: 100vw;
    padding-left: 0;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

div.container.footer div#row {
    width: 100vw;
    margin-bottom: -9%!important;
    display: block;
    max-width: none;
    position: relative;
    margin-left: 0!important;
}

div.container.footer div#row div#coords {
    margin-top: 0.3%; //instead of margin-top: 3%;
    padding-top: 3%;
}

.clearboth {
    clear: both;
}

我在 2 个 .col-md-5 div 之后添加了一个 clearboth div。 clear:both用于结束 float 。否则 div#row 不会合并其子项的高度。

您的 HTML 将如下所示:

<div id="coords">...</div>
<div class="col-md-5">...</div>
<div class="col-md-5 col-md-offset-2">...</div>
<div class="clearboth"></div>