Нижний колонтитул кажется сломанным на IE11 - PullRequest
0 голосов
/ 18 октября 2019

enter image description here Похоже, что нижний колонтитул моего веб-сайта поврежден в браузерах IE11, но отображается нормально в других браузерах и платформах:

HTML-код нижнего колонтитула:

 <div id="contact" class="offset">
        <footer>
            <div class="row">
                <div class="col-md-5">
                    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                    <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 866 220"><title>BWA_Logo</title><!-- here I have the svg logo -->
                    <p>At our core is a collection of design and development solutions that represent everything your business needs to compete in the modern marketplace.</p>
                    <strong>Headquarters</strong>
                    <p>7120 Smoke Ranch Rd<br>Las Vegas, NV 89128</p>
                    <strong>Contact Info</strong>
                    <p>(702) 435-6947<br>info@blainewarren.com</p>
                </div>

            <div class="col-md-7">
                <h3 id="contact-us">Contact Us</h3>

                <form id="contact-form" method="post" action="contact.php">

                    <div class="messages"></div>
                    <div class="controls">

                        <div class="form-group">
                            <input id="form_name" type="text" name="name" class="form-control" placeholder="Enter your name." required="required">
                        </div>

                        <div class="form-group">
                            <input id="form_email" type="email" name="email" class="form-control" placeholder="Enter your email." required="required">
                        </div>

                        <div class="form-group">
                            <textarea id="form_message" name="message" class="form-control" placeholder="Add your message." rows="4" required="required"></textarea>
                        </div>

                        <input type="submit" class="btn btn-outline-light btn-sm" value="Send message">

                    </div>

                </form>

            </div>

            <hr class="socket">
            &copy; Blaine Warren Advertising, LLC.<br/>
            All Rights Reserved

        </div> <!--- End of Row -->
    </footer> <!--- End of Footer -->

</div>
<!--- End Contact Section -->

Соответствующее css:

    /*============= CONTACT SECTION =============*/

footer {
    /*background: url('img/footer/footer.png') no-repeat;*/
    /*background-color: #40474e;*/
    background-color: #231F1F;
    background-size: cover;
    color: white;
}
footer .row {
    background-color: #231F1F;
    /*background-color: rgba(57, 63, 70, 0.85);*/
    padding: 1rem 2rem 3rem;
}
footer img {
    height: 2rem;
    margin: 1.5rem 0;
}
footer a {
    color: white;
}
footer svg.svg-inline--fa {
    font-size: 1.6rem;
    margin: 1.2rem .5rem 0 0;
}
footer svg.svg-inline--fa:hover {
    color: #1ebba3!important;
}
footer h3 {
    text-transform: uppercase;
    margin: 1.5rem 0;
}
/*--- Contact Form --*/
.form-group {
    margin-bottom: 1.3rem;
}
.form-control {
    background-color: #53595f;
    border-radius: 0;
    border: .15rem solid #666b71;
    color: white!important;
    font-size: 1.1rem;
}
.form-control:focus {
    background: #53595f;
    border: .15rem solid #666b71;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #b2b5b8!important;
}
input.btn {
    cursor: pointer;
}
hr.socket {
    border-top: .2rem solid #666b71;
    width: 100%;
}

Страницу можно просмотреть по адресу: https://blainewarren.com/ Любые советы о том, как это исправить, приветствуются: клиент использует IE11 в Windows. Для этого я использую тему Nuno из учебного курса Udemy Bootstrap, а также Bootstrap 4, HTML, CSS и jQuery.

1 Ответ

0 голосов
/ 23 октября 2019

Попробовав несколько вещей безрезультатно, я наконец понял, как это исправить, добавив это в css:

_:-ms-fullscreen, :root .footer-logo-svg {
    height: 45%;
}

И добавив класс 'footer-logo-svg' к логотипу svg внижний колонтитулИтак, эта ошибка исправлена ​​успешно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...