Safari 與鉻。 頁腳沒有以相同的方式呈現

Question

所以我正在開發一個網站，我主要使用 Chrome 和開發人員工具進行響應部分，但我意識到我的頁腳在 Safari 上看起來不一樣，我不知道為什么？

它看起來像這樣：

但在 Chrome 中它看起來像：

頁腳按原樣開發：

<div>
                <Navbar className="footer-navbar">
                    <div className="footer-container">
                        <div className="footer-menu">
                            <div>
                                <Navbar.Brand href="/">
                                    <img
                                        src= { SiteLogo }
                                        className="footer-logo"
                                        alt="Village"
                                    />
                                </Navbar.Brand>
                            </div>
                            <div className="footer-subscribe">
                                <InputGroup>
                                    <Form.Control
                                    type="email"
                                    placeholder={TextContents.EmailSubscribe}
                                    bsPrefix="footer-subscribe-form-control"
                                />
                                </InputGroup>       
                            </div>
                            <div className="footer-follow-container">
                                <WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
                                <p className="footer-follow-text"> {TextContents.Follow} </p>
                                <FontAwesomeIcon icon={faFacebook} className="footer-follow-icon"/>
                                <FontAwesomeIcon icon={faTwitter} className="footer-follow-icon"/>
                                <FontAwesomeIcon icon={faInstagram} className="footer-follow-icon"/>
                                <FontAwesomeIcon icon={faLinkedinIn} className="footer-follow-icon"/>
                            </div>
                        </div>
                        <div>
                        <p className="footer-copyright-text">{TextContents.Copyright}</p>
                        </div>
                    </div>
                </Navbar>
            </div>);

css

.footer-navbar{
    background-color: white;
    width: 90%;
    margin-top: 2%;
    margin-bottom: 2%;
    font-family: Fredoka One;
    font-size: 18px;
    margin: auto;
}

.footer-logo {
    width: 214px;
    height: 28px;
    margin-right: 40px;/*theme.spacing(3)*/
}
.footer-container{
    display: flex;
    box-shadow: none;
    background-color: #ffffff;
    /*margin-top: 24; /*theme.spacing(3),*/
    bottom: 0;
    width: 90%;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer-menu {
    display: flex;
    position: relative;
}

.footer-subscribe {
    display: flex;
    border-radius: 21px;
    margin-right: 16; /*theme.spacing(2),*/
    margin-left: 24; /*theme.spacing(3),*/
    width: 467px;
    height: 70px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-follow-container {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 10px;/*theme.spacing(2),*/
    min-width: 300px;
}

.footer-follow-text {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #ff7255;
    font-family: Source Sans Pro;
    min-width: 75px;
    margin-left: 40px;
    margin-right: 5px;
}

.footer-follow-icon {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-left: 2px;
    color: #ff7255;
}

.footer-copyright-text {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #ff7255;
    font-family: Source Sans Pro;
}

.footer-subscribe-form-control {
    width: 470px;
    height: 40px;
    border-radius: 20px;
    font-family: Source Sans Pro;
    text-align: left;
    color: #cdcece;
    background-color: #f4f7f8;
    border-style: none;
}

Answer 1

嘗試刪除高度限制：2.5rem from.footer-container。