时间戳

首页 > 解决方案 > ie中的垂直对齐占位符

css - ie中的垂直对齐占位符

问题描述

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

如果可能的话，我希望复选框在 IE 中看起来也一样，它看起来像 -webkit-appearance: 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;
}

标签： cssplaceholder

解决方案

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

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

编辑：

关于这个appearance问题，-webkit-appearance是vendor prefix。

通过将代码切换为：

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

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

推荐阅读