html - Safari 中的图像重叠 Figcaption
问题描述
我正在使用媒体查询和断点来使我的网页响应。我有 3 张带有 figcaptions 的图片。当三个图像在不同的列中时,一切都很好。但是,对于移动布局,所有内容都在同一列中。在 safari 中,移动布局遇到以下问题:图像与 figcaption 重叠。在 Firefox 或 chrome 中不会出现此问题。不幸的是,由于我不知道是什么导致了这个问题,我不知道如何压缩代码并仍然重现错误。我正在使用 css 网格来布局我的页面(有些元素本身也是网格)。太感谢了。
部分页面截图:
铬:(工作)
Safari(不工作)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header-logo">D</h1>
<div class="header-text">
<h1 class="header-name">Name</h1>
<h2 class="header-title">Title</h2>
</div>
</header>
<img class="large-image" src="images/code.jpg">
<main class="main">
<h2 class="featured-work">Featured Work</h2>
<figure class="project-1">
<img src="images/project-1.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 1</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-2">
<img src="images/project-2.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 2</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-3">
<img src="images/project-3.png">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 3</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
</main>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #7d97ad;
font-style: normal;
overflow-x: hidden;
}
img, embed, object, video {
max-width: 100%;
}
.caption-header {
margin: 0;
color: #2d3c49;
font-size: 35px;
font-weight: 600;
}
a {
color:#337ab7;
text-decoration:none;
}
a:hover, a:focus {
color:#23527c;
text-decoration:underline;
}
a:focus {
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.caption {
text-align: center;
}
.header-logo {
margin: 0;
color: #42c5f4;
font-size: 60px;
font-weight: bold;
text-align: center;
grid-area: hdlg;
}
.header-text {
text-align: center;
grid-area: hdtxt;
}
.header-name {
margin: 0;
font-size: 40px;
font-weight: 100;}
.header-title {
margin: 0;
font-weight: normal;
}
.featured-work {
font-weight: normal;
margin: 0;
grid-area: ftwk;
}
.project-1 {
margin: 0;
grid-area: prjone;
}
.project-1 img {
width: 100%;
}
.project-2 {
margin: 0;
grid-area: prjtwo;
}
.project-2 img {
width: 100%;
}
.project-3 {
margin: 0;
grid-area: prjthree;
}
.project-3 img {
width: 100%;
}
.header {
grid-area: header;
display: grid;
border-bottom: 3px solid #7d97ad;
grid-template-areas:
"hdlg"
"hdtxt";
}
.large-image {
width: 100%;
margin: 0;
padding: 0;
grid-area: limg;
}
.main {
grid-gap: 20px;
grid-area: main;
display: grid;
grid-template-areas:
"ftwk"
"prjone"
"prjtwo"
"prjthree";
}
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"limg"
"main";
}
@media screen and (min-width: 600px) {
.header {
grid-template-columns: 90px 1fr;
grid-template-areas:
"hdlg hdtxt";
}
.header-logo {
text-align: left;
}
.header-text {
text-align: right;
}
.main {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"ftwk ftwk ftwk"
"prjone prjtwo prjthree";
}
}
@media screen and (min-width: 800px) {
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
解决方案
推荐阅读
- swift - 什么是快速获得“换日”事件的有效方法
- node.js - 通过浏览器启用 Apache2 Proxypass 的多端口请求
- haskell - 从任意未知 Nats 中提取值
- coq - Coq:在分离逻辑基础中比较一个 Int 和一个 Nat
- webpack-5 - Webpack 5 运行时和依赖属性
- html - 如何使此文本在颤动中填充动画
- sql - 如何根据postgres中json数组中的键更新值?
- python - ManimGL 不能正确渲染 SVGMobject,这是为什么呢?我所有的其他场景都很漂亮
- google-mlkit - 非英语语言的 ML-KIT 文本识别
- python - 使用 BS 从 Python 中的 CSV 中提取表