垂直对齐占位符

Question

有人能帮我为下面的标记修复IE中占位符的垂直对齐吗？我修复了其他浏览器，使用transform:translateY(3px(看起来不错；不幸的是，html来自我的时事通讯提供商的一个小部件，所以我不能更改它，我只能访问css样式。

如果可能的话，我希望复选框在IE中看起来也一样，它看起来像-webkit的外观：none；对ie不起作用。非常感谢

HTML

<input type="hidden" name="wpmailup-subscribe" class="wpmailup-subscribe" value="subscribe">
<fieldset class="subscribeDataTable">
<h4 class="widgettitle">Iscriviti alla nostra newsletter!</h4>
<p class="muDescription"></p>
<p class="muField">
<input type="text" name="sub-email" class="sub-email" placeholder="Email*">
</p>
<p class="muField">
<input type="text" name="sub-ext1" class="sub-ext1" maxlength="80" placeholder="Nome*">
</p>
<p class="muTermsCheckbox">
<label><input name="terms-confirm" class="terms-confirm" type="checkbox" value="yes"> Accetto l'informativa sulla <a class="ppaccept" href="/privacy-policy"></a></label>
</p>
</span>
<p class="muSubmit"><input type="submit" name="submit" value="iscriviti!"></p>
</fieldset>

CSS

.subscribeForm input {
border-width: 1px;
border-style: solid;
border-color: #ffd300;
padding: 16px;
line-height: 2em;
font-size: 16px;
}

Answer 1

您在输入上设置了line-height: 2em;，这在不同的浏览器中计算不同。删除这一行，你应该会在IE和Chrome/其他现代浏览器上看到垂直对齐的占位符。

.subscribeForm input {
border-width: 1px;
border-style: solid;
border-color: #ffd300;
padding: 16px;
/* line-height: 2em; */
}

编辑：

关于appearance问题，-webkit-appearance是供应商前缀。

通过将代码切换为：

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

这将确保它适用于所有浏览器。请注意，Edge和IE处理前缀的方式不同。