标签和输入与机器人常规不对齐

Question

使用 Chrome 作为浏览器时，我在对齐输入和标签时遇到一些问题。我同时使用视网膜屏幕和非视网膜屏幕，但我无法在两者上获得完美的结果。看起来 Roboto Regular 在

<label>

和

<input>

中渲染的效果不一样。

这是结果：

这是重现该问题的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>Document</title>
  <style>
    body {
        padding: 50px;
    }

    .field {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin: 5px 0;
        position: relative;
    }

    input, select, label {
            font-family: 'Roboto', Arial, Helvetica, sans-serif;
      box-sizing: border-box;
      border: 1px solid grey;
      font-size:14.4px;
      height: 30px;
        }

    label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
      
    .line {
      position: fixed;
      height:1px;
      width: 100%;
      background-color: red;
      left:0;
      top: 75px;
      z-index:1;
    }
    </style>
</head>

<body>
  <div class="line"></div>
    <div class="field">
        <label>Titre :</label>
        <input type="text" value="Titre">
    </div>
</body>

</html>

我的标签和输入是垂直对齐的。
我通过 lib normalize.css 将行高固定为 1.15px。

如果我使用其他字体，例如 Arial，就不再有问题了。

第一个解决方案
我在标签上使用了

line-height: normal;

，看起来不错。但这并不是适合所有人的解决方案，并且不会在所有浏览器上显示相同的行高。

我有点困惑。为什么

<label>

和我的

<input>

之间的渲染不同？这没有意义。

你能解释一下为什么吗？

如果答案是“浏览器对输入和标签的处理方式不同”，你能告诉我为什么吗？

Answer 1

看起来我可以用两种解决方案来解决我的问题。（我想保留我的特定字体大小）。

解决方案1
按照@C3roe 评论所述删除高度。如果我想保持相似的高度，我可以使用填充来做到这一点。

解决方案2
修改line-height为1.25。
我知道浏览器会执行诸如 line-height * 1.25 之类的操作。 14.4*1.25 = 18（四舍五入值）。即使我保留

height:30px

，它也会给我正确的结果。

这是一个解决方案，即使我不知道为什么。我推荐“Vincent De Oliviera”中有关字体规格的文章。它可以解释为什么我遇到这个问题。

标签和输入与机器人常规不对齐

问题描述投票：0回答：1

1个回答

最新问题

标签和输入与机器人常规不对齐

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1