我的网站在 Firefox 中不起作用 - 文本超出边距

Question

I have designed a website to be dynamic so that the width of the browser allows for the content to adjust. However on this specific page, the size of the browser in firefox ONLY is giving me problems:

The text goes beyond it's margins and clashes into the image on firefox when adjusting the screen size. Try it out and let me know. The css is very simple as well.

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

The html is as follows:

<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

It has to do with .profile{width:480px;} , then making the .profile img{height:100%; width:auto;} .profile img{height:100%; width:auto;} . When the Browser size changes width, the image is still base on the 100% height of .profile (which may not have changed at all), therefore it's not scaling the way you desire. Your image should really fit the original page load design for vector scaling, anyways. Give .profile the proper height and width, then you can set .profile img{height:100%; width:100%;} .profile img{height:100%; width:100%;} .