客户端看到不同版本的页面。居中问题

Question

我在为今天启动的客户工作的网站上遇到了一些问题。在我的机器和我的 iphone 上，一切看起来都符合规范，但在他们的机器上，他们发现了很多问题。

有机器

我的机器

有机器

我的机器

我已经尝试清除我的浏览器缓存，但我在 wordpress 上没有任何缓存插件，所以我不确定为什么我没有看到她遇到的问题。我们也在 mac 上使用 safari。

居中似乎有问题。谁能弄清楚发生了什么事？我有点为难。

这是着陆页

<div class="homepagewrap" id="portbgimage1" style="background-image: url('<?    php the_field('MC_homepagebackground'); ?>');">
    <div class="borderin">
        <div class="logohome">
            <a href="<?php bloginfo('url');?>/portfolio/"><img src="<?php     the_field('homepage_logo'); ?>"></a>
        </div>
    </div>
    </div>
<div class="customfooter">
617-227-5343  ∙  <a     href="mailto:info@mcarterandco.com">info@mcarterandco.com</a>
</div>

和css

.homepagewrap{
background-attachment: fixed;
background-size: cover;
position: relative;

height:100vh;
box-sizing: border-box;
border: 20px solid rgba(0,0,0,0);
}


.logohome{
box-sizing: border-box;
padding: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logohome img{
max-width: 80%;
margin-left: 10%;
}

第二页

<div class="portwrap" id="portwrap1">
<div class="portwrapchild" id="portwrapchild1">
<a href="<?php bloginfo('url');?>/newclassic/"><span class="porttitles"     id="porttitles1">The New Classic</span></a>
</div>
<div class="portbgimage" id="portbgimage1" style="background-image: url('<?php     the_field('portupload1'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap2">
<div class="portwrapchild" id="portwrapchild2">
<a href="<?php bloginfo('url');?>/artful-mix/"><span class="porttitles"     id="porttitles2">The Artful Mix</span></a>
</div>
<div class="portbgimage" id="portbgimage2" style="background-image: url('<?php     the_field('portupload2'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap3">
<div class="portwrapchild" id="portwrapchild3">
<a href="<?php bloginfo('url');?>/historic-home/"><span class="porttitles"     id="porttitles3">The Historic Home</span></a>
</div>
<div class="portbgimage" id="portbgimage3" style="background-image: url('<?php     the_field('portupload3'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap4">
<div class="portwrapchild" id="portwrapchild4">
<a href="<?php bloginfo('url');?>/escape/"><span class="porttitles"     id="porttitles4">The Escape</span></a>
</div>
<div class="portbgimage" id="portbgimage4" style="background-image: url('<?php     the_field('portupload4'); ?>');"></div>

和伴随的css

.portwrap{
position: relative;
float: left;
width: 50%;
height: 50%;
background-size: cover;
}

.portbgimage{
width:100%;
height:100%;
}

#portwrap1{
border-top: 20px solid #E0E0E0;
border-right: 10px solid #E0E0E0;
border-bottom: 10px solid #E0E0E0;
border-left: 20px solid #E0E0E0;
box-sizing: border-box;
}
#portwrap2{
border-top: 20px  solid #E0E0E0;
border-right: 20px solid #E0E0E0;
border-bottom: 10px solid #E0E0E0;
border-left: 10px solid #E0E0E0;
box-sizing: border-box;
}

#portwrap3{
border-top: 10px solid #E0E0E0;
border-right: 10px solid #E0E0E0;
border-bottom: 20px solid #E0E0E0;
border-left: 20px solid #E0E0E0;
box-sizing: border-box;
}

#portwrap4{
border-top: 10px solid #E0E0E0;
border-right: 20px solid #E0E0E0;
border-bottom: 20px solid #E0E0E0;
border-left: 10px solid #E0E0E0;
box-sizing: border-box;
}


.portwrapchild {
/*overflow: hidden;*/
z-index:99;
text-align: center;
font-family: 'Crimson Text', serif;
font-style: italic;
font-weight: 200;
font-size: 3.5em;
color: #E0E0E0;
width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}

Answer 1

除了您提供的一小段代码外，您还不知道其他很多东西，您没有包含特定于浏览器的前缀，这些前缀可以使不同浏览器的旧版本正常工作。

所以像

-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;

可能会有帮助。请务必将前缀放在无前缀版本之前，并将前缀应用于您正在使用的其他也需要前缀的 CSS 属性，例如 transform 和 background-size:cover

客户端看到不同版本的页面。居中问题

Client seeing different version of page. Issues with Centering

html

css

wordpress

centering