HTML输入字段高度在不同浏览器中不同

Question

现状

在一个简单的网站上，我有一个固定高度的输入控件，其中有一个具有特定字体大小的文本。我希望该文本在输入字段的中间垂直对齐显示。但即使我使用了重置 css（链接here）并将-webkit-appearance 设置为none，它仍然没有居中。

您可以看到，对于 IE，顶部的填充更高，对于 iOS，它甚至更糟。还有 12 个像素内边距。

一些代码

HTML：

<!-- time -->
<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>

CSS：

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
}

实际问题

我怎样才能有一个文本字段，其中文本对于所有浏览器都是垂直对齐的。

我知道这个问题已经被问过几次了，但是提出的解决方案直到现在都没有奏效。这可能是我想念的微不足道的事情。

Answer 1

该问题是由输入字段的height 属性与字体组合引起的。删除 height 使输入字段内的文本正确居中。

这可能是因为有些字符在 00:00 基线下方增长，例如字母 p、q 等，因此字体的垂直中心低于“00:00”垂直中心.字体大小包括在字体大小之上扩展的边界。检查下图中的顶部和底部方位线：

作为一种解决方案，我会删除高度并使用产生所需高度总和的字体大小。

另外作为旁注，37px 输入字段还包括 2px 边框大小（1px 上边框和 1px 下边框），因此使用 35px 字体大小更适合您的示例。

Answer 2

更新

采纳了@scooterlord 关于移除高度的建议，它解决了 90% 的问题。 10% 仍然是使用 iOS 时的 4px 偏移，这与我的第一个解决方案相同。不同之处在于，在不再指定高度的情况下，我能够添加 4px padding-top 来对齐 iOS，并且它不会在桌面浏览器上推送字体。所以基本上：

1. 移除高度
2. 添加padding-top: 4px;

参见代码片段 2 和/或 CODEPEN

---

旧

有一些更改更多是为了美观而不是跨浏览器兼容性，这些更改具有重要意义，它们用/* ✎ */ 表示。在 Chrome、Firefox、Edge 和 IE 中测试。我尝试了我的 iPhone 5，但我在尝试导航到此页面时失去了耐心（我有 5 个左手拇指?）

IE11 片段 1

html {
  /* ✎ */
  font: 300 16px/1.428 "roboto", sans-serif;
  /* ✎ */
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */
  box-sizing: border-box;
  /* ✎ */
  margin: 0;
  /* ✎ */
  padding: 0;
  /* ✎ */
  border: 0;
}

.meeting-time {
  width: 100px;
  height: 37px;
  text-align: center;
  /* ✎ */
  font: inherit;
  /* ✎ */
  font-size: 2.3125rem;
  /* ✎ */
  line-height: 100%;
  background: yellow;
  /* ✎ */
  vertical-align: middle;
  -webkit-appearance: none;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">


<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px;" value="00:00" />

片段 2

html {
  /* ✎ */
  font: 300 16px/1.428 "roboto", sans-serif;
  /* ✎ */
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */
  box-sizing: border-box;
  /* ✎ */
  margin: 0;
  /* ✎ */
  padding: 0;
  /* ✎ */
  border: 0;
}


/* For iOS ???BEGIN??? */


/* ✎ */

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
}


/* For iOS  ???END??? */


/* For demo (optional) ???BEGIN??? */

main {
  height: auto;
  width: 100%;
  padding: 2vh 2vw;
}

header {
  display: table;
}

hgroup {
  display: table-row;
}

h5 {
  text-align: right;
  font: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  width: 150px;
}

h6 {
  display: table-cell;
  width: 100px;
  font: inherit;
}

hr {
  height: 0;
  margin: 1.25em auto;
  border: 0 none transparent;
  border-bottom: 1px solid #000;
}

hr:nth-of-type(even) {
  border-bottom: 1px dashed #000;
}


/* For demo (optional) ???END??? */


/* Example 1 */

.ex1Time {
  width: 100px;
  height: 37px;
  text-align: center;
  font: inherit;
  font-size: 37px;
  background: yellow;
}


/* Example 2 */

.ex2Time {
  width: 5ch;
  text-align: center;
  font: inherit;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}


/* Example 3 */

.ex3Time {
  width: 5ch;
  text-align: center;
  font-family: Arial;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet'>

<main>

  <hr/>
  <header>
    <hgroup>
      <h6>Original Code</h6>
      <h5>Example 1</h5>
    </hgroup>
  </header>
  <hr/>

  <input type="text" class="ex1Time" value="00:00">

  <input type="text" class="ex1Time" value="07:22">

  <input type="text" class="ex1Time" value="11:11">

  <input type="text" class="ex1Time" value="12:34">

  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Font dependent lengths are measured in ch units</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex2Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 2</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex2Time" value="00:00">

  <input type="text" class="ex2Time" value="07:22">

  <input type="text" class="ex2Time" value="11:11">

  <input type="text" class="ex2Time" value="12:34">


  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Using Arial instead of Roboto</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex3Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 3</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex3Time" value="00:00">

  <input type="text" class="ex3Time" value="07:22">

  <input type="text" class="ex3Time" value="11:11">

  <input type="text" class="ex3Time" value="12:34">


  <hr/>
</main>

Answer 3

你尝试过使用 line-height 吗？

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    line-height:37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
    }

<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>

我在您的 CSS 中添加了 line-height。试试上面的方法，看看效果如何。

Answer 4

移除您的身高并使用填充代替，但使用 ems