Question

我正在使用媒体查询和断点使我的网页具有响应能力。我有3个带有figcaptions的图像。当三个图像位于单独的列中时，一切都很好。但是，对于移动设备布局，所有内容都在同一列中。在野生动物园中，移动布局遇到以下问题：图像与figcaption重叠。在Firefox或Chrome中不会发生此问题。不幸的是，由于我不知道是什么导致了此问题，所以我不知道如何压缩代码并仍然重现该错误。我正在使用CSS网格来布局我的页面（某些元素本身也是网格）。非常感谢。

部分页面的截图：

Chrome浏览器：（正在运行）

Screenshot

Safari（无效）

Screenshot

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;
    }
}

Safari中的图像重叠无标题说明

0 个答案: