按钮未显示在iPhone / iOS浏览器上，但在Android浏览器上完美显示？
我对页面上一个按钮元素的行为感到困惑。在桌面模拟电话屏幕上，一切都很好。我正在通过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;
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？