Question

因此Firefox桌面和Chrome移动应用似乎正在渲染带有文本输入宽度的额外填充的网页（Chrome桌面可以按预期显示它们）：

到目前为止，我从StackOverflow上类似的Firefox填充问题中尝试过的所有解决方案似乎都无法解决这一问题。以下是Chrome和Firefox对文本输入字段上的填充的检查（注意Firefox如何添加额外的18.1667像素）：

Chrome浏览器：

Firefox：

代码如下：

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>

Answer 1

我不知道您的计算机上的情况是否有所不同，但是在我的计算机上，这是两个因素的组合。

首先，显然，具有size属性的输入的结果宽度基于原始字体，而不是样式表中给出的字体。解决方案：同样在样式表中以ch为单位设置宽度。

Lato字体似乎也引起了问题。如果我删除它而只使用Arial，则两种浏览器的结果都相同。

希望这会有所帮助！

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px 'Arial', sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
    width: 8ch;                  /* new */
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>

Firefox桌面和Chrome移动版添加了神秘的文本输入宽度填充

1 个答案: