输入类型文本的填充不使用引导程序 4 在 IE 11 中显示占位符和键入的文本答案

【问题标题】：Padding of input type text does not show placeholder and typed text in IE 11 using bootstrap 4输入类型文本的填充不使用引导程序 4 在 IE 11 中显示占位符和键入的文本
【发布时间】：2020-02-05 12:43:57
【问题描述】：

我正在使用 bootstrap 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="">

【问题讨论】：

好的，通过将样式移动到我创建的 sn-p 中的引导样式表之后重新创建

标签： html css internet-explorer bootstrap-4

【解决方案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浏览器中的结果是这样的：

此外，您还可以设置 height 属性，例如：

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

结果如下：

【讨论】：

我的噩梦已经过去了，因为你的解释很好。谢谢。