输入字段中的奇怪边缘和具有非整数值的高度

问题描述

我正在为一个非常常见的用户登录表单编写一些 CSS，但当我从另一台使用相同浏览器 (Firefox) 和操作系统 (Ubuntu) 的计算机登录时，外面出现了一些奇怪的白色边框。

>

更奇怪的是，只需调整窗口大小，它们就会出现和消失。

因为？如何避免这种情况？

谢谢大家的帮助！ :)

HTML：

1

更少：

<div class="npt nptFocus">
    <span>Aa</span>
    <input type="text" name="usr" placeholder="Nickname">
</div>

屏幕：

更新 1：添加了已编译的 CSS

// Palette
@main_color: blue;

@main: darken(saturate(@main_color,-97%),25%);
@neutral: saturate(darken(@main_color,-25%),-25%);
@verde: #118769;
@rosso: #fe5f55;
@bianco: darken(saturate(@main_color,-40%),-45%);

@v_soft = 10%;
@v_medium = 25%;
@v_hard = 40%;

@neutral_dark: darken(@neutral,@v_soft);
@verde_dark: darken(@verde,@v_soft);
@rosso_dark: darken(@rosso,@v_hard);

@main_light: lighten(@main,@v_hard);
@main_dark: darken(@main,8%);

@radius: 5px;

.npt {
    display: table;
    background: @bianco;
    border-radius: @radius;
    border: solid 1px @main_light;
    width: 100%;
    overflow: hidden;

    input,span{
        display: table-cell;
        padding: 10px;
        transition: 0.25s;
    }

    input {
        border: none;
        background: none;
        border-radius: 0px;
        color: @main;
        width: 100%;
    }

    span {
        border-right: solid 1px darken(@main_light,-15%);
        color: darken(@main,-40%);
        background: darken(@main_light,-25%);
        padding-left: 15px;
        padding-right: 15px;
        width: 55px;
    }

    &.nptFocus {
        border: solid 1px @neutral_dark;
        span {
            border-right: solid 1px @neutral_dark;
            color: @bianco;
            background: @neutral_dark;
        }
    }
}

更新 2：

在@Manas Khandelwal 的帮助和一起进行的测试之后，这似乎是由于浏览器呈现错误造成的，因为表单上方的徽标（宽度声明为百分比）永远不会有一个带有整数值。

想法？

真的唯一的解决方案是真的必须通过 JavaScript 对所有高度进行四舍五入吗？

.npt {
  display: table;
  background: #ebebfa;
  border-radius: 5px;
  border: solid 1px #a3a3a8;
  width: 100%;
  overflow: hidden;
}
.npt input,.npt span {
  display: table-cell;
  padding: 10px;
  transition: 0.25s;
}
.npt input {
  border: none;
  background: none;
  border-radius: 0px;
  color: #3e3e42;
  width: 100%;
}
.npt span {
  border-right: solid 1px #cacace;
  color: #a3a3a8;
  background: #e5e5e6;
  padding-left: 15px;
  padding-right: 15px;
  width: 55px;
}
.npt.nptFocus {
  border: solid 1px #6363e9;
}
.npt.nptFocus span {
  border-right: solid 1px #6363e9;
  color: #ebebfa;
  background: #6363e9;
}
.npt.nptError {
  border: solid 1px #fe5f55;
}
.npt.nptError span {
  border-right: solid 1px #fe5f55;
  color: #ebebfa;
  background: #fe5f55;
}
.npt.nptError.nptFocus {
  border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
  border-right: solid 1px #d38580;
  background: #d38580;
}
.npt.nptOk {
  border: solid 1px #118769;
}
.npt.nptOk span {
  border-right: solid 1px #118769;
  color: #ebebfa;
  background: #118769;
}
.npt.nptOk.nptFocus {
  border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
  border-right: solid 1px #6cac9b;
  background: #6cac9b;
}

解决方法

在输入元素中添加outline: none;；

代码笔：https://codepen.io/manaskhandelwal1/pen/WNGgQwP