Question

我对页面上一个按钮元素的行为感到困惑。在桌面模拟电话屏幕上，一切都很好。我正在通过CSS技巧使用“ vh”电话浏览器技巧来正确转换视口高度，以适应电话浏览器。我有一个大容器，内部有一个家用容器，一个大约为-100vw的容器和一个为'200vw'的压力容器。我使用CSS在这些部分之间进行翻译。当我在电话上实际测试该网站时，一切都按照我想要在android上的方式进行布局。另一方面，在IOS上，唯一未显示的元素是'press__mobile'按钮元素。我在about部分中放置了一个相同的按钮，该按钮同时显示在android和IOS上。非常困惑。行为异常的按钮在Safari和移动设备上的chrome中的作用相同，浏览器无关紧要。让我知道是否需要其他代码-我只是在为新闻集装箱张贴代码。下面的img-grid容器中有很多img卡，因此我删除了一些img卡以保持代码较小。

这是网站http://shekleung.com/的链接这是一些显示“后退”按钮的图像

HTML

 <section class="press-container">
         <div class="img-grid">
            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-4.png">
                  </div>
                  <div class="back face">
                     <a href="https://wwd.com/fashion-news/fashion-scoops/central-saint-martins-ma-fashion-recycling-craftsmanship-1203487690/"
                        target="_blank">WWD
                        : Central Saint Martins MA Fashion Champions Recycling and Craftsmanship<br><span>⬈</span></a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-5.png">
                  </div>
                  <div class="back face">
                     <a href="#">milk magazine hk: october 2019 : FROM BLOOMING YOUTH TO FASHION</a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-7.png">
                  </div>
                  <div class="back face">
                     <a href="https://www.sleek-mag.com/article/wearable-slime//" target="_blank">SLEEK MAGAZINE : Meet
                        the CSM fashion
                        grad
                        making clothes out of slime<br><span>⬈</span></a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="/img/Home/press/press-8.png">
                  </div>
                  <div class="back face">
                     <a href="https://1granary.com/designers-3/schools/central-saint-martins/one-year-out/"
                        target="_blank">1 GRANARY
                        : ONE
                        YEAR OUT<br><span>⬈</span></a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-9.png">
                  </div>
                  <div class="back face">
                     <a href="https://whynow.co.uk/read/samson-leung-finds-richness-in-linguistic-mistakes-and-mistranslation/"
                        target="_blank">why
                        now digital : Samson leung finds richness in liguistic mistakes and
                        mistranslation<br><span>⬈</span></a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-10.png">
                  </div>
                  <div class="back face">
                     <a href="https://www.dearboymag.com/stories/samson-leung" target="_blank">Dear Boy Magazine :
                        Interview with Samson
                        Leung<br><span>⬈</span></a>
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="/img/Home/press/press-11.png">
                  </div>
                  <div class="back face">
                     <a href="https://www.dewmagazine.com/under-the-radar-talent-samson-leung/"
                        target="_blank">UNDER-THE-RADAR TALENT :
                        SAMSON
                        LEUNG<br><span>⬈</span></a>
                  </div>
               </div>
            </div>
         <button onclick="closeAbout()" class="back_home press__mobile">BACK</button>
         <div class="fixed-wrapper">
            <div class="contact-wrapper menu-container">
               <button class="contactbtn" style="color:black;">Contact</button>
               <ul class="menu">
                  <li>
                     <p>For Any Enquiries→</p>
                  </li>
                  <li><a id="mail" style="color:black;" href="mailto:hello@shekleung.com"
                        target="_blank">hello@shekleung.com</a></li>
                  <li>
                     <p>+44 7463 070158</p>
                  </li><br>
                  <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en" target="_blank"
                        style="color:black;">Instagram</a></li>
               </ul>
            </div>
         </div>
      </section>

CSS-桌面样式

.press-container {

   width: 90vw;
   height: 100vh;
   position: absolute;
   left: 100vw;
   top: 0;
   display: flex;
   justify-content: space-around;
   overflow-y: scroll;
   box-shadow: -10px 0px 10px 1px #aaaaaa;

}


.img-grid {

   width: 70vw;
   height: 88vh;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   padding: 2rem;
   margin-top: 2vh;
   margin-left: -10vw;

}

.img-grid::-webkit-scrollbar {
   background-color: transparent;
}

.press-info {
   width: 20vw;
   height: 50vh;
   padding: 1.5rem;


}

.card {
   position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;

}

/* card front styling */


.front {

   position: absolute;
   width: 100%;
   height: 100%;
   transition: opacity 1s;
   display: block;


}


.front img {
   width: 100%;
   height: 100%;
}



/* card back styling */

.back {
   opacity: 0.5;
   background: grey;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: -1;
}


.card:hover .back {

   z-index: 100;
}

/* .face.back:hover {
   background-position: left;

} */



/* card link styling */

.face.back a {
   text-transform: uppercase;
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.8rem;
   display: block;
   color: white;
   padding: 2rem;
   left: -5vw;
   text-decoration: none;

}

.face.back a:hover {
   color: black;
}


.face.back a span {
   font-size: 2rem;
}

/* contact dropdown */

.fixed-wrapper {
   position: fixed;
   left: 173vw;
   top: 5vh;
   display: block;
   width: 15vw;
   height: 50vh;
   overflow: visible;

}

.contact-wrapper {
   font-family: Helvetica, sans-serif;
   height: 20vh;
   letter-spacing: 3px;
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: visible;
   text-transform: uppercase;
}



.contactbtn {
   color: black;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;
   float: right;

}

.contactbtn:hover {
   opacity: 0.6;
}

.contact-wrapper ul {
   position: absolute;
   margin-left:-4rem;
   margin-top: 5vh;
   color: black;
   width: 15vw;
   height: 20vh;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   text-align: right;
   opacity: 0;
   transform: translateY(-10px);
   transition: all 0.4s ease;
   -webkit-transform: translateY(-10px);
   -webkit-transition: all 0.4s ease;
   -moz-transform: translateY(-10px);
   -moz-transition: all 0.4s ease;

}

.contact-wrapper ul li a {
   text-align: right;
}


.contact-wrapper a:hover {

   background-color: var(--grCol3);
}

CSS-移动样式

   .press-container {
      width: 100vw;
      /* height: 100vh; */
      height: calc(var(--vh, 1vh) * 100);
   }

   .img-grid {
      margin-top: 6vh;
      margin-left: -30vw;
      padding: 1rem;
      height: 88vh;
      height: calc(var(--vh, 1vh) * 88);
      -webkit-overflow-scrolling: touch;
   }

   .press-info {
      width: 70vw;
      height: 47vh;
      height: calc(var(--vh, 1vh) * 47);
   }



   .fixed-wrapper {
      left: 173vw;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
   }

   .contact-wrapper {
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
   }

   .back_home {
      display: block;
      position: fixed;
      z-index: 2;
      font-family: Helvetica, sans-serif;
      font-size: 1.5rem;
      color: black;
      background-color: white;
      text-transform: uppercase;
      font-weight: bold;
   }

   .press__mobile {
      margin-left: 70vw;
      margin-top:85vh;
      margin-top: calc(var(--vh, 1vh) * 85);
   }

   .fixed-wrapper {
      top: 5vh;
      top: calc(var(--vh, 1vh) * 5);
   }

   .contactbtn {
      float: left;
      font-size: 1.4rem;
   }


   .contact-wrapper ul {
      background-color: rgba(255, 255, 255, 0.829);
      color: black;
      margin-top: 3vh;
      margin-top: calc(var(--vh, 1vh) * 3);
      width: 60vw;
      height: 18vh;
      height: calc(var(--vh, 1vh) * 18);
      margin-left: -45vw;
      text-align: center;
      justify-content: flex-start;
      padding: 1rem;
      pointer-events: none;
   }

   .contact-wrapper a {
      color: white;
   }

按钮未显示在iPhone / iOS浏览器上，但在Android浏览器上完美显示？

0 个答案: