Question

我在iPhone（Retina显示屏）上的Safari浏览器中的图像位置有问题。正如您在网站使用移动版时所看到的那样，我将flex-direction从row更改为column，并将图片大小更改为忽略。它与div.text

重叠

编辑：已解决： 我刚从flex: 0 0 20%行删除.avatar-wrap，一切正常。

HTML：

<div class="reference">
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
        </p>
        <div class="avatar-wrap">
            <img src="./assets/img/avatar.png" class="avatar">

            <div>
                John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a>
            </div>
        </div>
</div

和CSS：

div.reference
    width: 90% 
    display: flex
    align-items: center
    color: gray
    margin-top: 20px

    @media screen and (max-width: 1240px)
        flex-direction: column
        width: 100%
        font-size: .9em

    p
        padding: 20px

        &:before
            content: '“'
        &:after
            content: '”'

    .avatar-wrap
        flex: 0 0 20%

        display: flex
        flex-direction: column

        justify-content: center
        align-items: center             

        div
            margin-top: 15px
            text-align: center

            a
                color: black

.avatar
    max-height: 256px

Answer 1

已解决：我刚从flex: 0 0 20%行删除了.avatar-wrap，一切正常。

为什么Safari移动设备上的图像位置与flexbox损坏？

1 个答案: