Заполнение текста типа ввода не отображает заполнитель и набранный текст в IE 11 с использованием начальной загрузки 4

Question

Я реализую веб-страницу с помощью начальной загрузки 4. Как одна часть, требуется реализовать форму ввода пользователя. Хотя встроенные загрузочные типы ввода работают нормально, при попытке настроить тип ввода текста он не отображает набранный текст и заполнитель в IE 11. Он отлично работает во всех других браузерах и отлично работает в IE, когда я удалил заполнениесвойство. Вот мой код.

Результат вывода

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<style>
.form-control-user {
  border-radius: 10rem;
  padding: 1.5rem 1rem;
}
</style>
<input type="text" class="form-control form-control-user" name="name" placeholder="E-mail" value="">

Answer 1

Проблема связана со стилем заполнения и rem единицей. Как мы видим, заполнитель исчез, и когда мы вводим значение с помощью браузера IE, мы не можем увидеть это значение.

Чтобы решить эту проблему, попробуйте обратиться к следующему коду, чтобы установить специальный стиль для браузера IE, или использовать px вместо использования rem.

<style>
    .form-control-user {
        border-radius: 10rem;
        padding: 1.5rem 1rem;
    }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS */
        .form-control-user { 
            border-radius: 10rem;
            padding: 2px 1rem;
        }
    }
</style>

или

<style>
    .form-control-user {
        border-radius: 10rem;
        padding: 2px 1rem;
    }
</style>

Результат в браузере IE выглядит следующим образом:

Кроме того, вы также можете установить высотусвойство, такое как это:

    .form-control-user {
        height:4rem;
        border-radius: 10rem;
        padding: 1.5rem 1rem;
    } 

Результат, как показано ниже: