Question

我设计了一个动态网站，以便浏览器的宽度允许内容进行调整。但是在这个特定页面上，firefox中的浏览器大小只会给我带来问题：

调整屏幕大小时，文本超出了它的边距并与firefox上的图像冲突。尝试一下，让我知道。 css也非常简单。

.nav-phone>a:nth-child(3) {
    background-color: #fbc076;
}

.nav>a:nth-child(3) {
    background-color: #fbc076;
}

.newbox {
    background-color: white;
    display: block;
    margin: auto;
}

.readiblecolumns {
    background-color: white;
}

.readiblecolumns>p {
    line-height: 1;
}

/* Desktop */
@media screen and (min-width: 960px) {

    .newbox {
        height: auto;
        width: 80vw;
    }

    /* Reads Like Newspaper */
    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        height: 480px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    }

}

/* Tablet */
@media screen and (min-width: 520px) and (max-width: 959px) {

    .newbox {
        height: auto;
        width: 80vw;
    }

    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        height: 320px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    }

}

/* Phone */
@media screen and (max-width: 519px) {

    .newbox {
        height: auto;
        width: 90vw;
    }

    .readiblecolumns {
        width: 90vw;
        padding: 15px;
    }
}

html如下：

<div class="newbox">
    <div class="readiblecolumns">
        <div class="profile">
            <img src="Pictures/MyLife/mypicture.jpg" alt="">
        </div>
        <p>Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have."</p>
    </div>
</div>

Answer 1

您可能已经注意到，在Firefox中，多列中的img处理方式不同。溢出的图像部分是可见的而不是隐藏的

要解决此问题，请添加以下代码：

.profile {
    overflow: hidden;
}

Firefox网站内容超出保证金

1 个答案: