Question

我已在网站上添加了一个简单的下拉广告，该广告将在X秒后触发，网站的布局与以前相同。

在我检查过的每台设备上，一切正常，除了我自己的设备：）如上图所示，在chrome中，布局都很混乱，但是在其他浏览器上一切正常。

您可以在此处查看该网站： https://www.start-2-code.com/

我为chrome添加了所有必要的前缀，并且还在不同设备上使用chrome再次检查了网站，但我找不到问题

 <div class = "image_pop">
            <div class="image_pop_up" >
            <a href="#main__content" class="image_pop_up_close">&times;</a>
            <a href="https://click.linksynergy.com/fs-bin/click?id=ZmWG8YDQO/4&offerid=507388.4670&subid=0&type=4">
                <img 
                    class = "image_pop_up_image"
                    alt="The Official Alibaba Course for only $10.99." 
                    src="https://mproxy.banner.linksynergy.com/fs/banners/39197/39197_1622.png">
            </a>
            </div>  
        </div>

CSS代码

.image_pop {
  height: 100vh;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  opacity: 0;
  visibility: hidden;
  margin: 0 auto; }

  .image_pop_up {
    width: 50vw;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8);
            box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8); }
    @media only screen and (max-width: 31.25em) {
      .image_pop_up {
        width: 70vw; } }

    .image_pop_up_close {
      color: black;
      text-decoration: none;
      line-height: 1;
      font-size: 4rem;
      position: absolute;
      top: .5rem;
      left: 1rem; }

    .image_pop_up_image {
      max-width: 100%;
      max-height: 100%; }

我猜我们在不同的设备上有不同版本的chrome，是什么导致问题的？

网站布局仅在Chrome浏览器上有所不同

0 个答案: