为什么 IE 不能输入表单？答案

【问题标题】：Why can't IE type in form?为什么 IE 不能输入表单？
【发布时间】：2021-02-13 23:08:32
【问题描述】：

我正在设计的网站表单在 Firefox、Edge 和 Chrome 上运行良好。但是在 IE 上，我看不到占位符文本，并且当我尝试键入时，它没有显示任何内容。当我删除 CSS 文件时，我可以看到占位符文本以及表单中输入的任何内容。

CSS 出了点问题，但我不确定是什么：


/* Style place holder text and let it show CSS effect upon focus */
.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="url"],
.contact-us textarea
{
  -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    width: 100%;
    display: block;
    outline: none;
    border: none;
    height: 1em;
    line-height: 1em;
  font-size: 0.8em;
    font-family: Arial, sans-serif;
  color: grey;
    padding: .7em 0;
}
.contact-us input[type="text"]:focus,
.contact-us input[type="email"]:focus,
.contact-us input[type="url"]:focus,
.contact-us textarea:focus {
  padding: 2%;
}

【问题讨论】：

那些。浏览器的输入中没有占位符吗？什么浏览器版本？
我昨天才下载了 IE 进行测试，它的最新版本是 IE11。很抱歉我没有得到你的第一个问题。

标签： html css

【解决方案1】：

在搜索了更多内容后，我在this 线程上找到了答案。显然 CSS 框架中有一些东西将所有输入的高度设置为 2.4375rem，并且需要用类似的东西覆盖它：

.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="url"],
.contact-us textarea
{
    height: auto;
}

【讨论】：